当前位置：首页 > news >正文

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

news 2025/7/5 20:54:34

原生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>

静态页面

<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>

js核心代码

    window.onload = function () {const oBody = document.bodyconst 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 = truefnTime()function fnTime() {const myTime = new Date()const year = myTime.getFullYear()const month = myTime.getMonth() + 1const day = myTime.getDate()const hour = myTime.getHours()const minute = myTime.getMinutes()const second = myTime.getSeconds()//星期let week = myTime.getDay()switch (week) {case 0:week = '星期日'breakcase 1:week = '星期一'breakcase 2:week = '星期二'breakcase 3:week = '星期三'breakcase 4:week = '星期四'breakcase 5:week = '星期五'breakcase 6:week = '星期六'breakdefault:week = ''}const time = fnAddZero(hour) + fnAddZero(minute) + fnAddZero(second)// oP.innerHTML = timeoTitle.innerHTML = year + '年' + month + '月' + day + '日' + week//初始化加载一次，防止刷新的时候出现闪屏if(isInit){for (let i = 0; i < oImg.length; i++) {oImg[i].src = `./img/${time.charAt(i)}.JPG`}}isInit = falsereturn time}//辅助方法，补0function fnAddZero(num) {if (num < 10) {return '0' + num}return '' + num}let ht1=0;let h1 = 0setInterval(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 = 0setInterval(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 = 0setInterval(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 = 0setInterval(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 = 0setInterval(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);}