JavaScript之创意时钟项目(实例讲解)

当我们在学习 JavaScript 时，造一些有趣实用的小玩意儿是必不可少的，其中一个非常有意思的项目就是创意时钟。

项目简介

创意时钟是一个以时钟为基础，通过一些奇特的设计和特殊效果，将普通的时钟变成一个有趣的艺术品的项目。在这个项目中，我们将使用 JavaScript、HTML 和 CSS 来构建一个时钟，并添加动画，使它变得更具有趣味性。

前置知识

在进行本项目之前，你需要具备以下的知识：

• HTML
• CSS
• JavaScript

程序流程

以下是本项目的主要步骤：

1. 用 HTML 构建基本的网页结构；
2. 用 CSS 美化界面、布局信息；
3. 通过 JavaScript 添加时钟功能、动画等。

具体的代码实现及解释，可以参考下面的分享。

代码实现

HTML 结构

在 HTML 页面中创建一个 div，作为容器来存放时钟，并用 span 标签来显示具体时间。

<div id="clock">
  <span id="hour"></span> :
  <span id="minute"></span> :
  <span id="second"></span>
</div>

CSS 样式

我们需要添加一些样式来美化时钟界面：

#clock {
  background-color: #fff;
  border: 10px solid #000;
  border-radius: 50%;
  height: 200px;
  margin: 50px auto;
  position: relative;
  width: 200px;
}

#clock span {
  font-size: 3em;
  font-weight: bold;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

#hour {
  left: 25%;
}

#minute {
  left: 50%;
}

#second {
  left: 75%;
}

代码中，我们给 clock 的背景色设为白色，边框为黑色，边框圆角为 50%，高度和宽度均为 200px。span 标签用于显示时钟的具体时间，字体大小和粗细都设置为 3em 和 bold，位置设为左上方 50%，使用 CSS3 中的 transform 属性来对其进行对齐。

JavaScript 代码

在 JavaScript 中，需要使用 setInterval() 来实现刷新时间，每一秒钟更新一次。

var currenttime = setInterval(function() {
  var date = new Date();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();
  var hourDeg = (hour * 30) + (0.5 * minute);
  var minuteDeg = (minute * 6) + (0.1 * second);
  var secondDeg = second * 6;

  document.getElementById("hour").style.transform = "rotate(" + hourDeg + "deg)";
  document.getElementById("minute").style.transform = "rotate(" + minuteDeg + "deg)";
  document.getElementById("second").style.transform = "rotate(" + secondDeg + "deg)";
}, 1000);

在上面的代码中，我们先用 new Date() 获取当前时间，然后将其展示在对应的位置上。使用 CSS3 中的 transform 属性旋转时针、分针和秒针，具体的旋转角度可根据时间计算得出。

示例说明

示例1：更改样式

我们可以根据自己的需要，来更改时钟的样式。例如，将时钟的背景色改为深紫色，给字体添加阴影，更改字体大小等等。

#clock {
  background-color: #800080;
  border: 10px solid #000;
  border-radius: 50%;
  height: 100px;
  margin: 50px auto;
  position: relative;
  width: 100px;
}

#clock span {
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  position: absolute;
  text-shadow: 1px 1px #000;
  top: 50%;
  transform: translate(-50%, -50%);
}

示例2：添加时钟的数字

我们可以通过在 HTML 中嵌入数字，或者使用 JavaScript 实现数字的添加。

<div id="clock">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span id="hour"></span>
  <span id="minute"></span>
  <span id="second"></span>
</div>

或者使用 JavaScript 的 appendChild() 方法来实现数字的添加。

var clock = document.getElementById("clock");
for (var i = 1; i <= 12; i++) {
  var num = document.createElement("span");
  var angle = i * 30;
  num.innerText = i; // 数字展示
  num.style.transform = "rotate(" + angle + "deg) translate(-50%, -80%)";
  clock.appendChild(num);
}

以上两种方式都可以在时钟上添加数字，根据实际需要进行选择。