js實現(xiàn)帶翻轉(zhuǎn)動畫圖片時鐘
更新時間：2022年04月22日 17:05:18 作者：weixin_46341003
這篇文章主要為大家詳細介紹了js實現(xiàn)帶翻轉(zhuǎn)動畫的圖片時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)帶翻轉(zhuǎn)動畫圖片時鐘的具體代碼，供大家參考，具體內(nèi)容如下
首先上圖，先看效果
1、需求
根據(jù)當前系統(tǒng)時間來更改這個時鐘，更改時間時，數(shù)字向上翻動，轉(zhuǎn)成下一個數(shù)字。
2、編程思路
如果只是根據(jù)系統(tǒng)時間來更改圖片的話，其實很簡單，就是獲得每個數(shù)字圖片的DOM，獲得當前系統(tǒng)時間，然后更改其src為指定數(shù)字圖片就可以了。但是這邊想要加入這個反轉(zhuǎn)動畫，我們可以指定一個窗口，高度為一個數(shù)字圖片的大小，再檢測到時間變化時，我們在指定的數(shù)字圖片后加入我們想要改變的數(shù)字圖片結(jié)點，之后設(shè)置一個定時器用很小的時間不斷向上移動，這樣就能出這個上翻的動畫效果，等上升了一個數(shù)字圖片高度之后，刪除上面的第一個結(jié)點。由此往復(fù)，即可實現(xiàn)。
3、代碼實現(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 });
? ? ? ? //獲得時間格式為2020/12/30 18:54:39 第一個split(' ')[1]獲得18:54:39這個字符串，在對其.split('')獲得[1,8,:,5,4,:,3,9]這個數(shù)組
? ? ? ? //由此得到,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];
? ? ? ? ? ? //獲得當前的子結(jié)點
? ? ? ? ? ? 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];
? ? ? ? ? ? //獲得當前的子結(jié)點
? ? ? ? ? ? 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];
? ? ? ? ? ? //獲得當前的子結(jié)點
? ? ? ? ? ? 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];
? ? ? ? ? ? //獲得當前的子結(jié)點
? ? ? ? ? ? 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];
? ? ? ? ? ?//獲得當前的子結(jié)點
? ? ? ? ? ?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();
? ? ? ? //獲得當前的子結(jié)點
? ? ? ? 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>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript模擬實現(xiàn)網(wǎng)易云輪播效果
這篇文章主要介紹了如何利用JavaScript模仿網(wǎng)易云輪播效果的實現(xiàn)，文中的示例代碼講解詳細，對我們學習有一定幫助，需要的可以參考一下2022-04-04
本文主要介紹了js面向?qū)ο缶幊痰南嚓P(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
js簡易namespace管理器 實例代碼，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了js神秘的電報密碼 哈弗曼編碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
想把小說復(fù)制下來慢慢看，卻發(fā)現(xiàn)復(fù)制到記事本里出現(xiàn)一大堆亂七八糟的東西，很是不爽。于是就想了個簡單的辦法把它干掉了。2010-09-09
BootStrap模態(tài)框和select2合用時input無法獲取焦點的解決方法
在bootstrap的模態(tài)框里使用select2插件,會導致select2里的input輸入框沒有辦法獲得焦點,沒有辦法輸入。怎么解決這個問題呢？下面小編給大家?guī)砹薆ootStrap模態(tài)框和select2合用時input無法獲取焦點的解決方法，一起看看吧2017-09-09
這篇文章主要介紹了JavaScript中三種異步上傳文件方式的相關(guān)資料,需要的朋友可以參考下2016-03-03
js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法
這篇文章主要介紹了js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法,涉及html5屬性的相關(guān)技巧,需要的朋友可以參考下2015-06-06
詳解JavaScript實現(xiàn)監(jiān)聽路由變化
前端實現(xiàn)路由變化主要有兩種方式，本文主要介紹了這兩種方法的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript中fetch方法的相關(guān)資料,JavaScript中的fetch()方法用于向服務(wù)器請求并加載網(wǎng)頁中的信息,請求可以是返回JSON或XML格式數(shù)據(jù)的任何API,需要的朋友可以參考下2023-10-10