Shulou(Shulou.com)05/31 Report--

This article mainly explains "js how to achieve with flipped animation picture clock", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "js how to achieve flipped animation picture clock" bar!

First of all, let's look at the effect of the above picture.

1. Demand

Change the clock according to the current system time, and when you change the time, the number flips up to the next number.

2. Programming ideas

If you only change the picture according to the system time, it is actually very simple, that is, get the DOM of each digital picture, get the current system time, and then change its src to the specified digital picture. But if we want to add this reverse animation here, we can specify a window with a height of the size of a digital picture, and when a time change is detected, we add the digital picture node we want to change after the specified digital picture, and then set a timer to keep moving upward in a very small amount of time, so that we can get the animation effect of flipping up, and after we have increased the height of a digital picture. Delete the first node above. From this back and forth, it can be realized.

3. Code implementation

Title * {padding: 0; margin: 0;} .number {height: 70px; overflow: hidden; float: left;} .number img {display: block;}

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}) / get the time format as the first split ('') [1] at 18:54:39 on 2020-12-30 to get the string 18:54:39, after the .split ('') gets the array / / thus, time [0] time [1] is hours, time [3] time [4] is minutes. Time [6] time [7] is a second time = mytime.split ('') [1] .split ('') / / console.log (time); return new Array (time [0], time [1], time [3], time [4], time [6], time [7]);} var h2onome0memoir f1x0memf0m0remie0m2en0; / / Update hour 1 var ht1=0; setInterval (function () {var a = getTime (); if (a [0]! = H2) {h2yoga [0]) / / get the current child node 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) / / update hourly 2 var ht2=0; setInterval (function () {var a = getTime (); if (a [1]! = h3) {h3yoga [1]; / / get the current child node 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) }, 1)}, 1000); / / Update minute 1 var ft1=0; setInterval (function () {var a = getTime (); if (a [2]! = F1) {F1 [2]) / / get the current child node 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) / / Update minute 2 var ft2=0; setInterval (function () {var a = getTime (); if (a [3]! = f2) {f2yoga [3]; / / get the current child node 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) }, 1000)}, 1)}, 1000); / / Update seconds 1 var mt1=0; setInterval (function () {var a = getTime (); if (a [4]! = M1) {M1 accouna [4] / / get the current child node 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); / / update second 2 var mt2=0 SetInterval (function () {var a = getTime (); / / get the current child node 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) Thank you for your reading, this is the content of "how to achieve js with flipped animation picture clock". After the study of this article, I believe you have a deeper understanding of how to achieve js with flipped animation picture clock, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.