html 、css、js动态文字时钟

效果在这里插入图片描述思路是利用css的transform属性和js,来实现时钟布局和旋转。
代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>动态时钟</title>
   <style>
      .total {
         position: absolute;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 600px;
         height: 600px;
         font-size: 14px;
      }

      #tier {
         font-weight: 900;
      }

      #shizhong {
         /* background-image: url("./1b18aba6c58fba668715ba20abaed792.jpg"); */
         background-position: center;
         background-size: 100%;
         width: 1500px;
         height: 850px;
         background-repeat: no-repeat;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      * {
         transition: all linear .4s;
      }

      #hours {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 400px;
         height: 400px;
         margin-top: -200px;
         margin-left: -200px;
         border-radius: 50%;
      }

      #mins {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 600px;
         height: 600px;
         margin-top: -300px;
         margin-left: -300px;
         border-radius: 50%;
      }

      #secs {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 800px;
         height: 800px;
         margin-top: -400px;
         margin-left: -400px;
         border-radius: 50%;
      }

      #hours>span,
      .minsEles,
      .secsEles {
         position: absolute;
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: flex-end;
         align-items: center;
      }

      #center1,
      #center2 {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 10px;
         height: 10px;
         margin: 10px 0 0 -5px;
         border-radius: 50%;
         background-color: black;
      }

      #center2 {
         margin: 13px 0 0 0;
         width: 0px;
         height: 2px;
         border-radius: 0;
         transition: all linear 1s;
      }
   </style>
</head>

<body>
   <div id="shizhong">
      <div class="total">
         <div id="tier"></div>
         <div id="hours"></div>
         <div id="mins"></div>
         <div id="secs"></div>
         <span id="center1"></span>
         <span id="center2"></span>
      </div>
   </div>

   <script type="text/javascript">
      var time = new Date();
      var year = time.getFullYear();// 年份
      var month = time.getMonth() + 1;  // 月份
      var date = time.getDate();    // 日期
      var day = time.getDay();      // 周几
      var hour = time.getHours();   // 小时
      var min = time.getMinutes();  // 分钟
      var sec = time.getSeconds();  // 秒数
      // 各位数字  或  者小于十的数字  转换为汉字
      function numbergewei(a) {
         switch (a) {
            case 0: return "零";
            case 1: return "一";
            case 2: return "二";
            case 3: return "三";
            case 4: return "四";
            case 5: return "五";
            case 6: return "六";
            case 7: return "七";
            case 8: return "八";
            case 9: return "九";
         }
      }

      // 数字转换为汉字
      function number(a) {
         if (a >= 10) {
            if (a > 100) {    //    年份
               let str = "";
               for (let i = 1000; i >= 1; i = i / 10) {
                  str += numbergewei(parseInt(a / i % 10));
               }
               return str;
            } else if (a <= 20) {  //  十几
               return "十" + numbergewei(parseInt(a % 10))
            }
            let data = numbergewei(parseInt(a % 10)) == '零' ? "" : numbergewei(parseInt(a % 10))
            return numbergewei(parseInt(a / 10)) + "十" + data;
         }
         return numbergewei(a);
      }

      // 渲染时钟指针
      function renderClock(danwei = "分", findClass = "mins", clases = "minsEles", num = 60) {
         let minsStr = "";
         for (let i = 1; i <= num; i++) {
            if (i == num) {   //    如果分、秒针为60,或时针为24时,给零
               minsStr += `<span class='${clases}'>零${danwei}</span>`;
               break;
            }else if( i % 10 == 0){    // 如果是10的倍数,去掉生成的汉字 “零”  
               if(i ==10){             // 如果是10       去掉生成的汉字 “一”  
               minsStr += `<span class='${clases}'>十${danwei}</span>`;
               }else{
               minsStr += `<span class='${clases}'>${number(i/10)}${danwei}</span>`;
               }
            }
            else{
            minsStr += `<span class='${clases}'>${number(i)}${danwei}</span>`;
            }
         }
         document.getElementById(findClass).innerHTML = minsStr;
      }

      // 给指针角度
      function minsXuanzhuan(clases = "minsEles", num = 60) {
         let minsEleArr = document.getElementsByClassName(clases);
         for (let i = 0; i < minsEleArr.length; i++) {
            minsEleArr[i].style.transform = `rotate(${i * (360 / num)}deg)`;
         }
      }

      // 旋转
      function xuanzhuan(ele, jiaodu = 60, time = 2) {
         let arr = [];
         for (let i = 0; i < ele.length; i++) {
            let data = ele[i].style.transform.split("(")[1].split("deg")[0] - 0
            data -= (360 / jiaodu) * (time - 1);
            arr.push(data)
         }
         return arr;
      }

      // 根据当前时间排序时钟
      function setClock(sec = 2, secsEle, num = 60) {
         let arr = xuanzhuan(secsEle, num, sec);
         for (let i = 0; i < secsEle.length; i++) {
            secsEle[i].style.transform = `rotate(${arr[i]}deg)`
            if (arr[i] % 360 == 0) {
               secsEle[i].style.fontWeight = `900`
            } else {
               secsEle[i].style.fontWeight = `200`
            }
         }
      }

      // 中间年月日渲染
      function renderYear() {
         let setDey = "日"
         if(day)setDey = number(day);
            document.getElementById("tier").innerHTML = `
      <span class="years">${number(year)}</span>年<span class="months">${number(month)}</span>月<span class="dates">${number(date)}</span>日
      星期<span class="days">${setDey}</span>
      `;
      }

      // 中间横线变长
      setTimeout(() => {
         document.getElementById("center2").style.width = "400px";
      }, 10);

      //    渲染时钟
      renderYear();
      renderClock();
      renderClock("秒", "secs", "secsEles");
      renderClock("时", "hours", "hoursEles", 24)

      let secsEle = document.getElementsByClassName("secsEles");//  秒数节点
      let minsEle = document.getElementsByClassName("minsEles");//  分钟数节点
      let hoursEle = document.getElementsByClassName("hoursEles");//  小时数节点
      setTimeout(() => {
         minsXuanzhuan("hoursEles", 24);  // 散开时针
         setTimeout(() => {
            minsXuanzhuan();              // 散开分针
            setTimeout(() => {
               minsXuanzhuan("secsEles"); // 散开秒针

               setTimeout(() => {
                  let arr = [];
                  time = new Date();
                  hour = time.getHours();   // 小时
                  min = time.getMinutes();  // 分钟
                  sec = time.getSeconds();  // 秒数
                  
                  setClock(sec, secsEle);     // 给秒针时间
                  setClock(min, minsEle);    // 给分针时间
                  setClock(hour, hoursEle, 24);  // 给时针时间
                  // 让时钟走起来
                  setInterval(() => {
                     setClock(2, secsEle);    // 秒针时间给2时,秒针旋转一个刻度
                     time = new Date();
                     if (time.getMinutes() != min) { //     判断是否旋转分针
                        min = time.getMinutes();
                        setClock(2, minsEle);
                        if (time.getHours() != hour) { //   判断是否旋转时针
                           hour = time.getHours();
                           setClock(2, hoursEle, 24);
                           if (time.getDate() != date) {  //    判断日期是否变化
                              date = time.getDate();
                              day = time.getDay();
                              year = time.getFullYear();
                              month = time.getMonth() + 1;
                              renderYear();
                           }
                        }
                     }
                  }, 1000);   // 每秒转动秒针时间
               }, 500);       // 指针对齐时间
            }, 300);          // 秒针散开时间  
         }, 300);             // 分针散开时间
      }, 400);                // 时针散开时间

   </script>
</body>

</html>
发布了1 篇原创文章 · 获赞 18 · 访问量 3138
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览