(二)原生js案例之数码时钟计时

原生js实现的数字时间上下切换显示时间的效果，有参考相关设计，思路比较难，代码其实很简单

效果

代码实现

• 必要的样式

  <style>
      * {
        padding: 0;
        margin: 0;
      }
      .content{
        /* text-align: center; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        background: linear-gradient(202deg,#F3E7E9 0%,#FFFFFF 53%,#E3EEFF 100%); 

        
      }
      #title{
          margin:20px;
          font-size: 40px;
        }
      ul {
        list-style: none;
        overflow: hidden;
      }
      li {
        float: left;
      }
      li.time-box {
        width: 122px;
        height: 172px;
        overflow: hidden;
        position: relative;
      }
      li.colon{
        animation: dotLignt 1s linear infinite alternate;
        font-size: 80px;
        height: 172px;
        line-height: 172px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      }
      /* 
        闪烁东湖
      */
      @keyframes dotLignt {
          0% {
              opacity: 1;
          }
          50% {
            opacity: 50%;
          }
          100% {
            opacity: 0;
          }
      }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

• 静态页面

<div class="content">
   <h2 id="title"></h2>
   <p id="time"></p>
   <ul>
     <li id="h1" class="time-box">
       <img class="time" src="./img/0.JPG" alt="" srcset="" />
     </li>
     <li id="h2" class="time-box">
       <img class="time" src="./img/1.JPG" alt="" srcset="" />
     </li>
     <li class="colon">
       <span>:</span>
     </li>
     <li id="fen1" class="time-box">
       <img class="time" src="./img/2.JPG" alt="" srcset="" />
     </li>
     <li id="fen2" class="time-box">
       <img class="time" src="./img/3.JPG" alt="" srcset="" />
     </li>
     <li class="colon">
       <span>:</span>
     </li>
     <li id="miao1" class="time-box">
       <img class="time" src="./img/4.JPG" alt="" srcset="" />
     </li>
     <li id="miao2" class="time-box up">
       <img class="time" src="./img/5.JPG" alt="" srcset="" />
     </li>
   </ul>
 </div> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• js核心代码

    window.onload = function () {
        const oBody = document.body
        const oP = oBody.querySelector('#time')
        const oTitle = document.querySelector('#title')
        const oImg = document.querySelectorAll('img.time')
        const oH1 = document.querySelector('#h1')
        const oH2 = document.querySelector('#h2')
        const oFen1 = document.querySelector('#fen1')
        const oFen2 = document.querySelector('#fen2')
        const oMiao1 = document.querySelector('#miao1')
        const oMiao2 = document.querySelector('#miao2')
        let isInit = true
        fnTime()
        function fnTime() {
          const myTime = new Date()
          const year = myTime.getFullYear()
          const month = myTime.getMonth() + 1
          const day = myTime.getDate()
          const hour = myTime.getHours()
          const minute = myTime.getMinutes()
          const second = myTime.getSeconds()
          //星期
          let week = myTime.getDay()

          switch (week) {
            case 0:
              week = '星期日'
              break
            case 1:
              week = '星期一'
              break
            case 2:
              week = '星期二'
              break
            case 3:
              week = '星期三'
              break
            case 4:
              week = '星期四'
              break
            case 5:
              week = '星期五'
              break
            case 6:
              week = '星期六'
              break
            default:
              week = ''
          }
          const time = fnAddZero(hour) + fnAddZero(minute) + fnAddZero(second)
          // oP.innerHTML = time
          oTitle.innerHTML = year + '年' + month + '月' + day + '日' + week
          //初始化加载一次，防止刷新的时候出现闪屏
          if(isInit){
            for (let i = 0; i < oImg.length; i++) {
              oImg[i].src = `./img/${time.charAt(i)}.JPG`
            }
          }
          
          isInit = false
          return time
        }
        //辅助方法，补0
        function fnAddZero(num) {
          if (num < 10) {
            return '0' + num
          }
          return '' + num
        }

        let ht1=0;
        let h1 = 0
        setInterval(function () {
            let a = fnTime();
            //获得当前的子结点
            if(a[0] != h1){
              h1 = a[0];
              let childImg = oH1.getElementsByTagName('img')[0];
              let imgM = document.createElement('img');
              imgM.src='img/'+a[0]+'.jpg';
              oH1.appendChild(imgM);
              let m2 = setInterval(function () {
                  ht1+=1;
                  oH1.scrollTop=ht1;
                  if (ht1>=70){
                      clearInterval(m2);
                      setTimeout(function () {
                          childImg.remove();
                          ht1=0;
                      },100)
                  }
              },1)
            }

        },1000);


        let ht2=0;
        let h2 = 0
        setInterval(function () {
            let a = fnTime();
            //获得当前的子结点
            if(a[1] != h2){
              h2 = a[1];
              let childImg = oH2.getElementsByTagName('img')[0];
              let imgM = document.createElement('img');
              imgM.src='img/'+a[1]+'.jpg';
              oH2.appendChild(imgM);
              let m2 = setInterval(function () {
                  ht2+=1;
                  oH2.scrollTop=ht2;
                  if (ht2>=70){
                      clearInterval(m2);
                      setTimeout(function () {
                          childImg.remove();
                          ht2=0;
                      },100)
                  }
              },1)
            }

        },1000);



        let ft1=0;
        let f1 = 0
        setInterval(function () {
            let a = fnTime();
            //获得当前的子结点
            if(a[2] != f1){
              f1 = a[2];
              let childImg = oFen1.getElementsByTagName('img')[0];
              let imgM = document.createElement('img');
              imgM.src='img/'+a[2]+'.jpg';
              oFen1.appendChild(imgM);
              let m2 = setInterval(function () {
                  ft1+=1;
                  // console.log(mt2);
                  oFen1.scrollTop=ft1;
                  if (ft1>=70){
                      clearInterval(m2);
                      setTimeout(function () {
                          childImg.remove();
                          ft1=0;
                      },100)
                  }
              },1)
            }

        },1000);


        

        let ft2=0;
        let f2 = 0
        setInterval(function () {
            let a = fnTime();
            //获得当前的子结点
            if(a[3] != f2){
              f2 = a[3];
              let childImg = oFen2.getElementsByTagName('img')[0];
              let imgM = document.createElement('img');
              imgM.src='img/'+a[3]+'.jpg';
              oFen2.appendChild(imgM);
              let m2 = setInterval(function () {
                  ft2+=1;
                  oFen2.scrollTop=ft2;
                  if (ft2>=70){
                      clearInterval(m2);
                      setTimeout(function () {
                          childImg.remove();
                          ft2=0;
                      },100)
                  }
              },1)
            }

        },1000);

        let mt1=0;
        let m1 = 0
        setInterval(function () {
            let a = fnTime();
            console.log("
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/861619