这篇文章主要讲解了“js怎么实现带翻转动画图片时钟”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“js怎么实现带翻转动画图片时钟”吧！首先上图，先看效果1、需求根据当前系统时间来更改这个时钟，
这篇文章主要讲解了“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 h2=0,h3=0,f1=0,f2=0,m1=0,m2=0; //更新小时1 var ht1=0; setInterval(function () { var a = getTime(); if (a[0]!=h2){ h2=a[0]; //获得当前的子结点 var childImg = shi1D.getElementsByTagName('img')[0]; var imgM = document.createElement('img'); imgM.src='img/'+h2+'.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]!=h3){ h3=a[1]; //获得当前的子结点 var childImg = shi2D.getElementsByTagName('img')[0]; var imgM = document.createElement('img'); imgM.src='img/'+h3+'.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>感谢各位的阅读，以上就是“js怎么实现带翻转动画图片时钟”的内容了，经过本文的学习后，相信大家对js怎么实现带翻转动画图片时钟这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: js怎么实现带翻转动画图片时钟
本文链接: https://www.lsjlt.com/news/327856.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0