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;//更新小时1var 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);//更新小时2var 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);//更新分钟1var 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);//更新分钟2var 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);//更新秒1var 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);//更新秒2var 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制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
Fabric.js 删除元素（带过渡动画）
本文简介 Fabric.js 提供了2个方法删除对象. 一个是直接删除,另一个方法是带过渡动画删除元素(淡出动画). 本文重点讲带过渡动画删除元素的方法,还会讲到设置过渡时长 .删除后的 ...
原生js的图片时钟实现
代码实现如下: <title>图片时钟</title> </head> <body>  <img src= ...
flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
前端实现图片快速反转替换_HTML5开发之canvas实现元素图片镜像翻转动画效果的方法...
一.Canvas图片水平镜像翻转效果预览您可以狠狠的点击这里:canvas图片水平镜像翻转动画demo demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实 ...
html5手机手风琴相册,纯js带弹性动画的手风琴图片相册特效
这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效.该手风琴图片相册在鼠标滑过时,相应的图片会水平展开,而图片的说明文字则会垂直滑动上来,形成一些视觉差的感觉. 使用方法在页面 ...
拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
前端实现图片快速反转替换_在canvas上实现元素图片镜像翻转动画效果的方法
一.Canvas图片水平镜像翻转效果预览 demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转, ...
html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字. 查看演示下载资源: 14 次下载资源下载积分: 20 积分 js代码 const le ...

js实现图片时钟--带翻转动画

js实现图片时钟–带反转动画

js实现图片时钟--带翻转动画相关推荐

最新文章

热门文章