js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘
更新時(shí)間：2022年04月22日 17:05:18 作者：weixin_46341003
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫的圖片時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
首先上圖，先看效果
1、需求
根據(jù)當(dāng)前系統(tǒng)時(shí)間來(lái)更改這個(gè)時(shí)鐘，更改時(shí)間時(shí)，數(shù)字向上翻動(dòng)，轉(zhuǎn)成下一個(gè)數(shù)字。
2、編程思路
如果只是根據(jù)系統(tǒng)時(shí)間來(lái)更改圖片的話，其實(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 h1=0,h2=0,f1=0,f2=0,m1=0,m2=0;
? ? //更新小時(shí)1
? ? var ht1=0;
? ? setInterval(function () {
? ? ? ? var a = getTime();
? ? ? ? if (a[0]!=h1){
? ? ? ? ? ? h1=a[0];
? ? ? ? ? ? //獲得當(dāng)前的子結(jié)點(diǎn)
? ? ? ? ? ? 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);
? ? //更新小時(shí)2
? ? var ht2=0;
? ? setInterval(function () {
? ? ? ? var a = getTime();
? ? ? ? if(a[1]!=h2){
? ? ? ? ? ? h2=a[1];
? ? ? ? ? ? //獲得當(dāng)前的子結(jié)點(diǎn)
? ? ? ? ? ? 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];
? ? ? ? ? ? //獲得當(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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 原生js實(shí)現(xiàn)頁(yè)面滾動(dòng)動(dòng)畫
- 十個(gè)利用JavaScript實(shí)現(xiàn)的愛(ài)心動(dòng)畫特效
- 關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫時(shí)動(dòng)畫抖動(dòng)的原因與解決方法
- JavaScript實(shí)現(xiàn)瀑布動(dòng)畫
- JS使用window.requestAnimationFrame()實(shí)現(xiàn)逐幀動(dòng)畫
- JavaScript實(shí)現(xiàn)扯網(wǎng)動(dòng)畫效果的示例代碼
- 如何利用JS實(shí)現(xiàn)時(shí)間軸動(dòng)畫效果
- JS實(shí)現(xiàn)添加緩動(dòng)畫的方法
- JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫
相關(guān)文章
JavaScript模擬實(shí)現(xiàn)網(wǎng)易云輪播效果
這篇文章主要介紹了如何利用JavaScript模仿網(wǎng)易云輪播效果的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定幫助，需要的可以參考一下2022-04-04
本文主要介紹了js面向?qū)ο缶幊痰南嚓P(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js簡(jiǎn)易namespace管理器 實(shí)例代碼
js簡(jiǎn)易namespace管理器 實(shí)例代碼，需要的朋友可以參考一下2013-06-06
js神秘的電報(bào)密碼 哈弗曼編碼實(shí)現(xiàn)
這篇文章主要介紹了js神秘的電報(bào)密碼 哈弗曼編碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
復(fù)制小說(shuō)文本時(shí)出現(xiàn)的隨機(jī)亂碼的去除方法
想把小說(shuō)復(fù)制下來(lái)慢慢看，卻發(fā)現(xiàn)復(fù)制到記事本里出現(xiàn)一大堆亂七八糟的東西，很是不爽。于是就想了個(gè)簡(jiǎn)單的辦法把它干掉了。2010-09-09
BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)的解決方法
在bootstrap的模態(tài)框里使用select2插件,會(huì)導(dǎo)致select2里的input輸入框沒(méi)有辦法獲得焦點(diǎn),沒(méi)有辦法輸入。怎么解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)的解決方法，一起看看吧2017-09-09
這篇文章主要介紹了JavaScript中三種異步上傳文件方式的相關(guān)資料,需要的朋友可以參考下2016-03-03
js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法
這篇文章主要介紹了js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法,涉及html5屬性的相關(guān)技巧,需要的朋友可以參考下2015-06-06
詳解JavaScript實(shí)現(xiàn)監(jiān)聽(tīng)路由變化
前端實(shí)現(xiàn)路由變化主要有兩種方式，本文主要介紹了這兩種方法的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript中fetch方法的相關(guān)資料,JavaScript中的fetch()方法用于向服務(wù)器請(qǐng)求并加載網(wǎng)頁(yè)中的信息,請(qǐng)求可以是返回JSON或XML格式數(shù)據(jù)的任何API,需要的朋友可以參考下2023-10-10