溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“js怎么實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“js怎么實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘”吧！
首先上圖，先看效果
1、需求
根據(jù)當(dāng)前系統(tǒng)時(shí)間來更改這個(gè)時(shí)鐘，更改時(shí)間時(shí)，數(shù)字向上翻動(dòng)，轉(zhuǎn)成下一個(gè)數(shù)字。
2、編程思路
如果只是根據(jù)系統(tǒng)時(shí)間來更改圖片的話，其實(shí)很簡(jiǎn)單，就是獲得每個(gè)數(shù)字圖片的DOM，獲得當(dāng)前系統(tǒng)時(shí)間，然后更改其src為指定數(shù)字圖片就可以了。但是這邊想要加入這個(gè)反轉(zhuǎn)動(dòng)畫，我們可以指定一個(gè)窗口，高度為一個(gè)數(shù)字圖片的大小，再檢測(cè)到時(shí)間變化時(shí)，我們?cè)谥付ǖ臄?shù)字圖片后加入我們想要改變的數(shù)字圖片結(jié)點(diǎn)，之后設(shè)置一個(gè)定時(shí)器用很小的時(shí)間不斷向上移動(dòng)，這樣就能出這個(gè)上翻的動(dòng)畫效果，等上升了一個(gè)數(shù)字圖片高度之后，刪除上面的第一個(gè)結(jié)點(diǎn)。由此往復(fù)，即可實(shí)現(xiàn)。
3、代碼實(shí)現(xiàn)
<!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 });
//獲得時(shí)間格式為2020/12/30 18:54:39 第一個(gè)split(' ')[1]獲得18:54:39這個(gè)字符串，在對(duì)其.split('')獲得[1,8,:,5,4,:,3,9]這個(gè)數(shù)組
//由此得到,time[0]time[1]為小時(shí)，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;
//更新小時(shí)1
var ht1=0;
setInterval(function () {
var a = getTime();
if (a[0]!=h2){
h2=a[0];
//獲得當(dāng)前的子結(jié)點(diǎn)
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);
//更新小時(shí)2
var ht2=0;
setInterval(function () {
var a = getTime();
if(a[1]!=h3){
h3=a[1];
//獲得當(dāng)前的子結(jié)點(diǎn)
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];
//獲得當(dāng)前的子結(jié)點(diǎn)
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];
//獲得當(dāng)前的子結(jié)點(diǎn)
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];
//獲得當(dāng)前的子結(jié)點(diǎn)
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();
//獲得當(dāng)前的子結(jié)點(diǎn)
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怎么實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)js怎么實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼