css搭配js实现简单的时钟效果

最新推荐文章于 2023-07-19 17:06:14 发布

lookingForw_4585

最新推荐文章于 2023-07-19 17:06:14 发布

阅读量138

点赞数

分类专栏：前端 css 特效文章标签： js css3 html5 前端 css

本文链接：https://blog.csdn.net/weixin_43797046/article/details/108780027

版权

前端同时被 3 个专栏收录

27 篇文章 2 订阅

订阅专栏

特效

7 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

简单的时钟效果

先看下效果

在这里插入图片描述

代码简单，就不做多于的赘述了，直接上代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .bp {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      border-radius: 100%;
      margin: 100px auto;
      position: relative;
      background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    }

    .center {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: honeydew;
      position: relative;
      left: 188px;
      top: 192px;
      z-index: 99;
    }

    .kedu {
      width: 1px;
      height: 10px;
      background: black;
      position: absolute;
      left: 200px;
      top: 0px;
      transform-origin: 0px 200px;
    }

    .shuzi {
      position: absolute;
      width: 10px;
      font-size: 10px;
      height: 170px;
      transform-origin: bottom;
      top: 30px;
      left: 190px;
    }

    .sec {
      width: 1px;
      height: 150px;
      position: absolute;
      left: 200px;
      top: 60px;
      transform-origin: bottom;
      background: red;
    }

    .min {
      width: 2px;
      height: 120px;
      position: absolute;
      left: 198px;
      top: 80px;
      transform-origin: bottom;
      background: black;
    }

    .hour {
      width: 3px;
      height: 90px;
      position: absolute;
      left: 197px;
      top: 110px;
      transform-origin: bottom;
      background: black;
    }
  </style>
</head>

<body>
  <div class="bp">
    <div class="center"></div>
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
  </div>
</body>
<script type="text/javascript">
  var bigBox = document.querySelector(".bp");
  var hour = document.querySelector(".hour");
  var minute = document.querySelector(".min");
  var second = document.querySelector(".sec");
  var date = new Date();
  var hours = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  var hk = hours * 30 + min * 0.5;
  hour.style.transform = "rotateZ(" + hk + "deg)";
  minute.style.transform = "rotateZ(" + min * 6 + "deg)";
  second.style.transform = "rotateZ(" + sec * 6 + "deg)";
  for (var i = 0; i < 60; i++) {
    var kedu = document.createElement("div");
    kedu.className = "kedu";
    bigBox.appendChild(kedu);
  }
  for (var i = 0; i < 12; i++) {
    var shuzi = document.createElement("div");
    shuzi.className = "shuzi"
    shuzi.style.transform = "rotateZ(" + (i + 1) * 30 + "deg)";
    var num = document.createElement("div");
    num.innerHTML = i + 1;
    num.style.textAlign = "center";
    num.style.transform = "rotateZ(" + (i + 1) * -30 + "deg)";
    shuzi.appendChild(num)
    bigBox.appendChild(shuzi)
  }

  function keduchi() {
    var kds = document.querySelectorAll(".kedu");
    for (var i = 0; i < kds.length; i++) {
      kds[i].style.transform = 'rotateZ(' + 6 * i + 'deg)';
      if (i % 5 == 0) {
        kds[i].style.height = 15 + "px"
      }
    }
  }
  keduchi()
  var md = 0;
  setInterval(function () {
    var date2 = new Date();
    var ss = date2.getSeconds();
    if (ss % 60 == 0) {
      md++;
      var mds = min * 6 + 6 * md;
      minute.style.transform = "rotateZ(" + mds + "deg)";
      var hds = hk + 0.5 * md;
      hour.style.transform = "rotateZ(" + hds + "deg)";
    }
    second.style.transform = "rotateZ(" + ss * 6 + "deg)";
  }, 1000)
</script>

</html>

tips：

如果本文对您有帮助，欢迎评论告知。

lookingForw_4585

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css搭配js实现简单的时钟效果

简单的时钟效果先看下效果代码简单，就不做多于的赘述了，直接上代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bp { width: 400p
复制链接

扫一扫