纯js+css实现在线时钟

实现在线时钟一般需要用到 JavaScript 和 CSS 进行布局和动画效果的实现。下面是实现纯 JS 和 CSS 的在线时钟的完整攻略。

步骤一：HTML 结构

时钟需要显示时、分、秒，因此需要一个容器来分别放置时钟的三个部分，容器可以使用一个 div 标签。

<div class="clock">
  <div class="hour"> </div>
  <div class="minute"> </div>
  <div class="second"> </div>
</div>

步骤二：CSS 样式

首先需要设置容器的基本样式，如背景颜色、宽度、高度、圆角等。然后使用相对定位 positions 让时、分、秒的部分可以根据容器定位，再使用 CSS3 的旋转变换让时、分、秒的针正确旋转。

.clock{
  background: #EFEFEF;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
}

.hour,
.minute,
.second {
  position: absolute;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  transform-origin: bottom center;
}
.hour {
  height: 50px;
  width: 4px;
  background-color: #222;
  left: 95px;
  bottom: 100px;
}
.minute {
  height: 70px;
  width: 3px;
  background-color: #222222;
  left: 98px;
  bottom: 100px;
}
.second {
  height: 85px;
  width: 2px;
  background-color: #E74C3C;
  left: 99px;
  bottom: 100px;
}

步骤三：使用 JavaScript 更新时钟

使用 Date 对象获取当前的时、分、秒，通过计算当前时间中时、分、秒对应的度数，旋转时、分、秒针。

function clock(){
  var d = new Date();
  var hours = d.getHours();
  var minutes = d.getMinutes();
  var seconds = d.getSeconds();  

  var hourDeg = (hours * 30) + (0.5 * minutes);
  var minuteDeg = minutes * 6;
  var secondDeg = seconds * 6;

  $(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
  $(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
  $(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
}

setInterval(clock, 1000);

上面的 JavaScript 代码中，首先获取了当前时间的小时、分钟、秒数，然后计算出每个指针的旋转角度，最后通过 jQuery 处理样式变换，每秒钟一次更新时钟。

示例

下面是两个实现时钟的示例：

示例一

这个示例将时钟在页面中央居中，实现了响应式布局，时钟的大小会根据屏幕大小而改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在线时钟</title>
  <style>
    body {
      background: #f2f2f2;
    }
    .container{
      max-width: 700px;
      margin: 0 auto;
    }
    .clock{
      background: #EFEFEF;
      width: 80%;
      height: 400px;
      max-width: 700px;
      border-radius: 50%;
      position: relative;
      margin: 50px auto;
    }
    .hour,
    .minute,
    .second {
      position: absolute;
      width: 8px;
      height: 8px;
      background: black;
      border-radius: 50%;
      transform-origin: bottom center;
    }
    .hour {
      height: 50px;
      width: 4px;
      background-color: #222;
      left: 50%;
      margin-left: -2px;
      bottom: 200px;
    }
    .minute {
      height: 70px;
      width: 3px;
      background-color: #222;
      left: 50%;
      margin-left: -1.5px;
      bottom: 200px;
    }
    .second {
      height: 85px;
      width: 2px;
      background-color: #E74C3C;
      left: 50%;
      margin-left: -1px;
      bottom: 200px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="clock">
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>
    </div>
  </div>
  <script>
    function clock(){
      var d = new Date();
      var hours = d.getHours();
      var minutes = d.getMinutes();
      var seconds = d.getSeconds();

      var hourDeg = (hours * 30) + (0.5 * minutes);
      var minuteDeg = minutes * 6;
      var secondDeg = seconds * 6;

      $(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
      $(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
      $(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
    }

    setInterval(clock, 1000);
  </script>
</body>
</html>

示例二

这个示例将时钟放在页面的右下角，同时调整了时钟的颜色和大小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在线时钟</title>
  <style>
    body {
      background: #f2f2f2;
    }
    .clock{
      background: #222;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: fixed;
      bottom: 25px;
      right: 25px;
    }
    .hour,
    .minute,
    .second {
      position: absolute;
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
      transform-origin: bottom center;
    }
    .hour {
      height: 60px;
      width: 5px;
      background-color: #eaeaea;
      left: 95px;
      bottom: 100px;
    }
    .minute {
      height: 80px;
      width: 3px;
      background-color: #eaeaea;
      left: 98px;
      bottom: 100px;
    }
    .second {
      height: 100px;
      width: 2px;
      background-color: #e74c3c;
      left: 99px;
      bottom: 100px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="clock">
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
  </div>
  <script>
    function clock(){
      var d = new Date();
      var hours = d.getHours();
      var minutes = d.getMinutes();
      var seconds = d.getSeconds();

      var hourDeg = (hours * 30) + (0.5 * minutes);
      var minuteDeg = minutes * 6;
      var secondDeg = seconds * 6;

      $(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
      $(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
      $(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
    }

    setInterval(clock, 1000);
  </script>
</body>
</html>

以上是使用纯 JS 和 CSS 实现在线时钟的攻略，你可以根据自己的需要，自行调整时钟的颜色、大小、位置和样式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯js+css实现在线时钟 - Python技术站