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

效果

代码实现

• 必要的样式

• 静态页面

    
    
    
      
              
      
              
      
        :      
      
              
      
              
      
        :      
      
              
      
              
    
  
  

• 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("🚀 ~ a:", a)             //获得当前的子结点             if(a[4] != m1){               console.log("🚀 ~ m1:", m1)               console.log("🚀 ~ a[4]:", a[4])               m1 = a[4];               let childImg = oMiao1.getElementsByTagName('img')[0];               let imgM = document.createElement('img');               imgM.src='img/'+a[4]+'.jpg';               oMiao1.appendChild(imgM);               let m2 = setInterval(function () {                   mt1+=1;                   // console.log(mt2);                   oMiao1.scrollTop=mt1;                   if (mt1>=70){                       clearInterval(m2);                       setTimeout(function () {                           childImg.remove();                           mt1=0;                       },100)                   }               },1)             }          },1000);         let mt2=0;         setInterval(function () {             let a = fnTime();             //获得当前的子结点             let childImg = oMiao2.getElementsByTagName('img')[0];             let imgM = document.createElement('img');             imgM.src='img/'+a[5]+'.jpg';             oMiao2.appendChild(imgM);             let m2 = setInterval(function () {                 mt2+=1;                 // console.log(mt2);                 oMiao2.scrollTop=mt2;                 if (mt2>=70){                     clearInterval(m2);                     setTimeout(function () {                         childImg.remove();                         mt2=0;                     },100)                 }             },1)          },1000);    } 

这样就实现了我们的数字时间的切换效果