js实现带翻转动画图片时钟
作者:weixin_46341003
这篇文章主要为大家详细介绍了js实现带翻转动画的图片时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现带翻转动画图片时钟的具体代码,供大家参考,具体内容如下
首先上图,先看效果
1、需求
根据当前系统时间来更改这个时钟,更改时间时,数字向上翻动,转成下一个数字。
2、编程思路
如果只是根据系统时间来更改图片的话,其实很简单,就是获得每个数字图片的DOM,获得当前系统时间,然后更改其src为指定数字图片就可以了。但是这边想要加入这个反转动画,我们可以指定一个窗口,高度为一个数字图片的大小,再检测到时间变化时,我们在指定的数字图片后加入我们想要改变的数字图片结点,之后设置一个定时器用很小的时间不断向上移动,这样就能出这个上翻的动画效果,等上升了一个数字图片高度之后,删除上面的第一个结点。由此往复,即可实现。
3、代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ padding: 0; margin: 0; } .number{ height: 70px; overflow: hidden; float: left; } .number img{ display: block; } </style> <body> <div> <div id="shi1" class="number"> <img src="img/0.jpg" /> </div> <div id="shi2" class="number"> <img src="img/0.jpg" /> </div> <div class="number"> <img src="img/c.jpg" /> </div> <div id="fen1" class="number"> <img src="img/0.jpg" /> </div> <div id="fen2" class="number"> <img src="img/0.jpg" /> </div> <div class="number"> <img src="img/c.jpg" /> </div> <div id="miao1" class="number"> <img src="img/0.jpg" /> </div> <div id="miao2" class="number"> <img src="img/0.jpg" /> </div> </div> <script> var shi1D = document.getElementById('shi1'); var shi2D = document.getElementById('shi2'); var fen1D = document.getElementById('fen1'); var fen2D = document.getElementById('fen2'); var miao1D = document.getElementById('miao1'); var miao2D = document.getElementById('miao2'); function getTime() { var myDate = new Date(); var mytime=myDate.toLocaleString('chinese', { hour12: false }); //获得时间格式为2020/12/30 18:54:39 第一个split(' ')[1]获得18:54:39这个字符串,在对其.split('')获得[1,8,:,5,4,:,3,9]这个数组 //由此得到,time[0]time[1]为小时,time[3]time[4]为分钟,time[6]time[7]为秒 time = mytime.split(' ')[1].split(''); // console.log(time); return new Array(time[0],time[1],time[3],time[4],time[6],time[7]); } var h1=0,h2=0,f1=0,f2=0,m1=0,m2=0; //更新小时1 var ht1=0; setInterval(function () { var a = getTime(); if (a[0]!=h1){ h1=a[0]; //获得当前的子结点 var childImg = shi1D.getElementsByTagName('img')[0]; var imgM = document.createElement('img'); imgM.src='img/'+h1+'.jpg'; shi1D.appendChild(imgM); var s1 = setInterval(function () { ht1+=1; shi1D.scrollTop=ht1; if (ht1>=70){ clearInterval(s1); setTimeout(function () { childImg.remove(); ht1=0; },100) } },1) } },1000); //更新小时2 var ht2=0; setInterval(function () { var a = getTime(); if(a[1]!=h2){ h2=a[1]; //获得当前的子结点 var childImg = shi2D.getElementsByTagName('img')[0]; var imgM = document.createElement('img'); imgM.src='img/'+h2+'.jpg'; shi2D.appendChild(imgM); var m2 = setInterval(function () { ht2+=1; shi2D.scrollTop=mt1; if (ht2>=70){ clearInterval(m2); setTimeout(function () { childImg.remove(); ht2=0; },100) } },1) } },1000); //更新分钟1 var ft1=0; setInterval(function () { var a = getTime(); if (a[2]!=f1){ f1=a[2]; //获得当前的子结点 var childImg = fen1D.getElementsByTagName('img')[0]; var imgM = document.createElement('img'); imgM.src='img/'+f1+'.jpg'; fen1D.appendChild(imgM); var m2 = setInterval(function () { ft1+=1; miao1D.scrollTop=ft1; if (ft1>=70){ clearInterval(m2); setTimeout(function () { childImg.remove(); ft1=0; },100) } },1) } },1000); //更新分钟2 var ft2=0; setInterval(function () { var a = getTime(); if (a[3]!=f2){ f2=a[3]; //获得当前的子结点 var childImg = fen2D.getElementsByTagName('img')[0]; var imgM = document.createElement('img'); imgM.src='img/'+f2+'.jpg'; fen2D.appendChild(imgM); var m2 = setInterval(function () { ft2+=1; fen2D.scrollTop=ft2; if (ft2>=70){ clearInterval(m2); setTimeout(function () { childImg.remove(); ft2=0; },100) } },1) } },1000); //更新秒1 var mt1=0; setInterval(function () { var a = getTime(); if (a[4]!=m1){ m1=a[4]; //获得当前的子结点 var childImg = miao1D.getElementsByTagName('img')[0]; var imgM = document.createElement('img'); imgM.src='img/'+m1+'.jpg'; miao1D.appendChild(imgM); var m2 = setInterval(function () { mt1+=1; miao1D.scrollTop=mt1; if (mt1>=70){ clearInterval(m2); setTimeout(function () { childImg.remove(); mt1=0; },100) } },1) } },1000); //更新秒2 var mt2=0; setInterval(function () { var a = getTime(); //获得当前的子结点 var childImg = miao2D.getElementsByTagName('img')[0]; // miao2D.src='img/'+a[5]+'.jpg' var imgM = document.createElement('img'); imgM.src='img/'+a[5]+'.jpg'; miao2D.appendChild(imgM); var m2 = setInterval(function () { mt2+=1; // console.log(mt2); miao2D.scrollTop=mt2; if (mt2>=70){ clearInterval(m2); setTimeout(function () { childImg.remove(); mt2=0; },100) } },1) },1000); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。