js实现带翻转动画图片时钟
更新时间：2022年04月22日 17:05:18 作者：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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何使用gpu.js改善JavaScript的性能，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了javascript 分号总结及详细介绍的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了利用JS实现弹性漂浮效果的广告代码,文中的示例代码讲解详细,具有一定参考借鉴价值,感兴趣的同学可以跟随小编一起试一试2022-01-01
在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，很多时候就算用过几次这个api，在开发中也很容易忘记，还是要谷歌一下2018-06-06
这篇文章主要介绍了详解如何使用微信小程序云函数发送短信验证码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
在javascript中有两种注释方式,单行注释与多行注释。2011-09-09
本文给大家收藏整理了js数组去重的n种方法，大家可以根据自己需要选择比较好的方法，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要为大家详细介绍了JavaScript原型继承的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了详解微信小程序之scroll-view的flex布局问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要给大家介绍了关于var在for循环遇到的问题的几种解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
最新评论