JS实现页面炫酷的时钟特效示例

下面我将详细讲解如何使用JS实现页面炫酷的时钟特效。

第一步：HTML结构

首先，在HTML中创建一个时钟的容器，可以使用<div>标签包裹起来，为其添加一个id属性，以便JS能够准确定位到该元素。

<div id="clock"></div>

第二步：CSS样式

接着，为时钟容器添加CSS样式。我们可以先将时钟容器的大小和边框样式设置一下。

#clock {
  width: 200px;
  height: 200px;
  border: 5px solid #333;
  border-radius: 50%;
  position: relative;
}

紧接着，为时针、分针和秒针分别创建CSS样式，并设置其宽度、长度和背景颜色等属性。

#hour-hand {
  width: 8px;
  height: 60px;
  background-color: #333;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

#minute-hand {
  width: 6px;
  height: 80px;
  background-color: #666;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

#second-hand {
  width: 4px;
  height: 100px;
  background-color: #999;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

第三步：JS实现

接着是重头戏，JS实现时钟特效。我们需要获取当前时、分、秒的值，并将其转换为对应的角度。代码如下：

function updateClock() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();

  var hourAngle = (hour % 12 + minute / 60) * 30;
  var minuteAngle = minute * 6;
  var secondAngle = second * 6;

  document.getElementById("hour-hand").style.transform = "rotate(" + hourAngle + "deg)";
  document.getElementById("minute-hand").style.transform = "rotate(" + minuteAngle + "deg)";
  document.getElementById("second-hand").style.transform = "rotate(" + secondAngle + "deg)";
}

setInterval(updateClock, 1000);

上述代码中，updateClock()函数是核心方法，每秒钟执行一次。var now = new Date()获取当前时间，var hour = now.getHours()获取当前小时数，var minute = now.getMinutes()获取当前分钟数，var second = now.getSeconds()获取当前秒数。通过这些值，计算出时针、分针和秒针的角度，进而通过style属性设置对应的CSS属性。

示例说明1：指针颜色和长度可配置

通常默认时针、分针和秒针的颜色和长度是一样的，为了让这个时钟更加炫酷，我们可以将这些属性暴露出来，让用户可以配置指针的颜色和长度。代码如下：

function updateClock(config) {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();

  var hourAngle = (hour % 12 + minute / 60) * 30;
  var minuteAngle = minute * 6;
  var secondAngle = second * 6;

  document.getElementById("hour-hand").style.transform = "rotate(" + hourAngle + "deg)";
  document.getElementById("hour-hand").style.height = config.hourLength + "px";
  document.getElementById("hour-hand").style.backgroundColor = config.hourColor;

  document.getElementById("minute-hand").style.transform = "rotate(" + minuteAngle + "deg)";
  document.getElementById("minute-hand").style.height = config.minuteLength + "px";
  document.getElementById("minute-hand").style.backgroundColor = config.minuteColor;

  document.getElementById("second-hand").style.transform = "rotate(" + secondAngle + "deg)";
  document.getElementById("second-hand").style.height = config.secondLength + "px";
  document.getElementById("second-hand").style.backgroundColor = config.secondColor;
}

var defaultConfig = {
  hourColor: "#333",
  minuteColor: "#666",
  secondColor: "#999",
  hourLength: 60,
  minuteLength: 80,
  secondLength: 100
};

setInterval(function() {
  updateClock(defaultConfig);
}, 1000);

示例说明2：支持动态调整时钟大小

为了让页面中的时钟适应不同设备分辨率的需求，我们还可以支持动态调整时钟大小，这里使用范围为10%到100%。代码如下：

@media (max-width: 768px) {
  #clock {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  #clock {
    width: 150px;
    height: 150px;
  }
}

@media (min-width: 1201px) {
  #clock {
    width: 200px;
    height: 200px;
  }
}

function updateClock(config, size) {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();

  var hourAngle = (hour % 12 + minute / 60) * 30;
  var minuteAngle = minute * 6;
  var secondAngle = second * 6;

  document.getElementById("hour-hand").style.transform = "rotate(" + hourAngle + "deg)";
  document.getElementById("hour-hand").style.height = config.hourLength * size / 100 + "px";
  document.getElementById("hour-hand").style.backgroundColor = config.hourColor;

  document.getElementById("minute-hand").style.transform = "rotate(" + minuteAngle + "deg)";
  document.getElementById("minute-hand").style.height = config.minuteLength * size / 100 + "px";
  document.getElementById("minute-hand").style.backgroundColor = config.minuteColor;

  document.getElementById("second-hand").style.transform = "rotate(" + secondAngle + "deg)";
  document.getElementById("second-hand").style.height = config.secondLength * size / 100 + "px";
  document.getElementById("second-hand").style.backgroundColor = config.secondColor;
}

var defaultConfig = {
  hourColor: "#333",
  minuteColor: "#666",
  secondColor: "#999",
  hourLength: 60,
  minuteLength: 80,
  secondLength: 100
};

var defaultSize = 100;
setInterval(function() {
  updateClock(defaultConfig, defaultSize);
}, 1000);

document.querySelector("#size").addEventListener("input", function(e) {
  defaultSize = parseInt(e.target.value);
  updateClock(defaultConfig, defaultSize);
});

以上两种示例可以为实现页面炫酷的时钟特效提供一些思路和实现方式。