两百行代码写一个时钟

最新推荐文章于 2023-12-12 18:23:00 发布

新时代农民工--小明

最新推荐文章于 2023-12-12 18:23:00 发布

阅读量112

点赞数 2

分类专栏：原生DOM 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43376417/article/details/124339747

版权

原生DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用摸鱼的时候写了个时钟，好久没写原生的东西了，练练手，先看看效果

点这里，嘿嘿

不用怀疑这个时间准确性，因为就是十一点多的时候拍的，废话不多说，上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .flex {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      body {
        height: 100vh;
        background: rgba(0, 0, 0, 1);
        overflow: hidden;
      }
      .box {
        box-sizing: border-box;
        position: relative;
        width: 400px;
        height: 400px;
        border: 15px solid #999;
        background: #fff;
        border-radius: 50%;
        transform: rotate(90deg);
        box-shadow: 1px 1px 22px 6px #fff;
      }
      .center {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-6px, -3.5px);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgb(106, 0, 235);
        z-index: 999;
      }
      .day,
      .ss {
        transition: all 1.8s ease-in-out;
      }
      .day,
      .ss,
      .hhand,
      .mhand,
      .shand {
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 4px;
      }
      .day span {
        display: inline-block;
        width: 10px;
        height: 3px;
        background: #555;
        z-index: 9;
      }
      .ss span {
        display: inline-block;
        width: 6px;
        height: 1px;
        background: #333;
      }
      .day .hspan {
        width: 12px;
        height: 4px;
        z-index: 9;
        background: #000;
      }
      .hhand,
      .mhand,
      .shand {
        transition: all 1s;
      }
      /* 时针 */
      .hhand {
        z-index: 9;
      }
      .hhand span {
        position: absolute;
        left: 22%;
        width: 31%;
        height: 8px;
        margin-top: -2px;
        border-radius: 300% 20px 20px 300%;
        background: #000;
      }
      /* 分 */
      .mhand {
        z-index: 8;
      }
      .mhand span {
        position: absolute;
        left: 11%;
        width: 42%;
        height: 6px;
        margin-top: -1.5px;
        border-radius: 300% 20px 20px 300%;
        background: rgb(220, 245, 32);
      }
      /* 秒 */
      .shand span {
        position: absolute;
        left: 5%;
        width: 48%;
        height: 4px;
        margin-top: -1px;
        border-radius: 300% 20px 20px 300%;
        background: rgb(247, 87, 51);
      }
    </style>
  </head>
  <body class="flex">
    <div class="box">
      <span class="center"></span>
      <div class="hhand"><span></span></div>
      <div class="mhand"><span></span></div>
      <div class="shand"><span></span></div>
    </div>
    <script>
      function createElment() {
        var divbox = document.querySelector('.box')
        // 生成小时刻度
        for (let i = 0; i < 12; i++) {
          let el = document.createElement('div')
          var span = document.createElement('span')
          if (i == 0 || i == 3 || i == 6 || i == 9) {
            span.className = 'hspan'
          }
          el.className = 'day'
          el.append(span)
          divbox.append(el)
        }
        // 生成秒刻度
        for (let i = 0; i < 60; i++) {
          let el = document.createElement('div')
          var span = document.createElement('span')
          el.className = 'ss'
          el.append(span)
          divbox.append(el)
        }
      }
      createElment()
      var shand = document.querySelector('.shand')
      var mhand = document.querySelector('.mhand')
      var hhand = document.querySelector('.hhand')
      function claerTransition() {
        setTimeout(() => {
          shand.style.transition = 'none'
          mhand.style.transition = 'none'
          hhand.style.transition = 'none'
        }, 1000)
      }
      // 秒
      async function seconds(time) {
        var s = time.getSeconds()
        shand.style.transform = `rotate(${s * 6}deg)`
      }
      // 分
      async function minutes(time) {
        var m = time.getMinutes()
        mhand.style.transform = `rotate(${m * 6}deg)`
      }
      // 时
      function hours(time) {
        var h = time.getHours() - 12
        var deg = h * 30 + (time.getMinutes() / 60) * 24
        hhand.style.transform = `rotate(${deg}deg)`
      }
      function timeStart() {
        var time = new Date()
        seconds(time)
        minutes(time)
        hours(time)
        claerTransition()
        setInterval(() => {
          var time = new Date()
          seconds(time)
          minutes(time)
          hours(time)
        }, 1000)
      }
      window.onload = () => {
        var day = document.querySelectorAll('.day')
        var ss = document.querySelectorAll('.ss')
        var deg = 0
        var sdeg = 0
        day.forEach((item) => {
          item.style.transform = `rotate(${deg}deg)`
          deg += 30
        })
        setTimeout(() => {
          ss.forEach((item) => {
            item.style.transform = `rotate(${deg}deg)`
            deg += 6
          })
          setTimeout(() => {
            timeStart()
          }, 1800)
        }, 1800)
      }
    </script>
  </body>
</html>