js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫(huà)圖片時(shí)鐘
更新時(shí)間：2022年04月22日 17:05:18 作者：weixin_46341003
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫(huà)的圖片時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫(huà)圖片時(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)畫(huà)，我們可以指定一個(gè)窗口，高度為一個(gè)數(shù)字圖片的大小，再檢測(cè)到時(shí)間變化時(shí)，我們?cè)谥付ǖ臄?shù)字圖片后加入我們想要改變的數(shù)字圖片結(jié)點(diǎn)，之后設(shè)置一個(gè)定時(shí)器用很小的時(shí)間不斷向上移動(dòng)，這樣就能出這個(gè)上翻的動(dòng)畫(huà)效果，等上升了一個(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)畫(huà)
- 十個(gè)利用JavaScript實(shí)現(xiàn)的愛(ài)心動(dòng)畫(huà)特效
- 關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫(huà)時(shí)動(dòng)畫(huà)抖動(dòng)的原因與解決方法
- JavaScript實(shí)現(xiàn)瀑布動(dòng)畫(huà)
- JS使用window.requestAnimationFrame()實(shí)現(xiàn)逐幀動(dòng)畫(huà)
- JavaScript實(shí)現(xiàn)扯網(wǎng)動(dòng)畫(huà)效果的示例代碼
- 如何利用JS實(shí)現(xiàn)時(shí)間軸動(dòng)畫(huà)效果
- JS實(shí)現(xiàn)添加緩動(dòng)畫(huà)的方法
- JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫(huà)
相關(guān)文章
利用H5api實(shí)現(xiàn)時(shí)鐘的繪制(javascript)
這篇文章主要為大家詳細(xì)介紹了利用H5api實(shí)現(xiàn)時(shí)鐘的繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript遍歷table表格中的某行某列并打印其值
這篇文章主要介紹了JavaScript遍歷table表格中的某行某列并打印其值,需要的朋友可以參考下2014-07-07
JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)彈性運(yùn)動(dòng)的原理、相關(guān)技術(shù)細(xì)節(jié)與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了基于JS繪制2021的煙花效果，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
JavaScript全屏和退出全屏事件總結(jié)（附代碼）
這篇文章主要介紹了JavaScript全屏和退出全屏事件,先通過(guò)window.ieIsfSceen = false或true進(jìn)行判斷是否為全屏，在進(jìn)行進(jìn)入全屏和退出全屏的操作,需要的朋友可以參考下2017-08-08
微信小程序?qū)崿F(xiàn)自定義動(dòng)畫(huà)彈框/提示框的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自定義動(dòng)畫(huà)彈框/提示框的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了微信小程序之swiper滑動(dòng)面板用法,結(jié)合實(shí)例形式詳細(xì)分析了swiper滑動(dòng)面板的具體功能、參數(shù)、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
原生js實(shí)現(xiàn)的觀察者和訂閱者模式簡(jiǎn)單示例
這篇文章主要介紹了原生js實(shí)現(xiàn)的觀察者和訂閱者模式,結(jié)合簡(jiǎn)單實(shí)例形式分析了js觀察者和訂閱者模式的相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法
這篇文章主要介紹了原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法,無(wú)需通過(guò)載入jQuery腳本即可實(shí)現(xiàn)圖片的延時(shí)加載效果,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js 去掉字符串前后空格實(shí)現(xiàn)代碼集合,需要的朋友可以參考下2017-03-03