JS實現(xiàn)倒計時圖文效果
更新時間：2018年11月17日 10:14:33 作者：wxk_前端開發(fā)
這篇文章主要為大家詳細介紹了JS實現(xiàn)倒計時圖文效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)倒計時圖文效果的具體代碼，供大家參考，具體內(nèi)容如下
<body>
<img src="images/0.png" alt="" id="h1">
<img src="images/0.png" alt="" id="h2">
<img src="images/second1.png" alt="">
<img src="images/0.png" alt="" id="m1">
<img src="images/0.png" alt="" id="m2">
<img src="images/second1.png" alt="" >
<img src="images/0.png" alt="" id="s1">
<img src="images/0.png" alt="" id="s2">
<script type="text/javascript">
//獲取節(jié)點對象
var oH1=document.getElementById('h1');
var oH2=document.getElementById('h2');
var oM1=document.getElementById('m1');
var oM2=document.getElementById('m2');
var oS1=document.getElementById('s1');
var oS2=document.getElementById('s2');
//函數(shù)調(diào)用
getTime();
function getTime(){
//獲取截止時間到1970年之間的毫秒數(shù)
var endTime=new Date('2018-07-13 12:00:00').getTime();
//獲取當(dāng)前時間到1970年之間的毫秒數(shù)
var nowTime=new Date().getTime();
//時間差（毫秒）
var leftTime=endTime-nowTime;
//獲取時分秒
var h=parseInt(leftTime/1000/3600);//獲得剩余的小時數(shù)
var m=parseInt(leftTime/1000/60%60);//獲得剩余的分鐘
var s=parseInt(leftTime/1000%60);//獲得剩余的秒數(shù)
//加零(無論是小時還是分鐘還是秒數(shù)都會有單個數(shù)的時候，所以可以通過加零來讓其變成兩位數(shù))
h=setNum(h);
m=setNum(m);
s=setNum(s);
//雙位數(shù)變成單位數(shù)
var h1=h%10;
var h2=parseInt(h/10);
var m1=m%10;
var m2=parseInt(m/10);
var s1=s%10;
var s2=parseInt(s/10);
//改變圖片地址(下面兩種方法都可以實現(xiàn)圖片地址的變化)
oH1.setAttribute('src','images/'+h2+'.png');
oH2.setAttribute('src','images/'+h1+'.png');
oM1.setAttribute('src','images/'+m2+'.png');
oM2.setAttribute('src','images/'+m1+'.png');
oS1.setAttribute('src','images/'+s2+'.png');
oS2.setAttribute('src','images/'+s1+'.png');
/*oH1.src='images/'+h2+'.png';
oH2.src='images/'+h1+'.png';
oM1.src='images/'+m2+'.png';
oM2.src='images/'+m1+'.png';
oS1.src='images/'+s2+'.png';
oS2.src='images/'+s1+'.png';*/
setTimeout(getTime,1000);
}
//添零函數(shù)
function setNum(num){
if(num<10){
num="0"+num;
}
return num;
}
</script>
</body>
見下圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細介紹了javascript實現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了小程序如何寫動態(tài)標簽的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家介紹了使用canvas實現(xiàn)音樂頻譜示例及技術(shù)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
JavaScript利用虛擬列表實現(xiàn)高性能渲染數(shù)據(jù)詳解
在前文中我們提到可以使用時間分片的方式來對長列表進行渲染，但這種方式更適用于列表項的DOM結(jié)構(gòu)十分簡單的情況，所以本文來講講如何使用虛擬列表的方式，來同時加載大量數(shù)據(jù)吧2023-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)拉鏈式的滑動驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
語音識別極速版能將60秒以內(nèi)的完整音頻文件識別為文字，本文主要介紹采用百度語音識別,實現(xiàn)小程序的聽寫功能，感興趣的同學(xué)可以來了解一下2020-03-03
使用JavaScript實現(xiàn)彈出層效果的簡單實例
下面小編就為大家?guī)硪黄褂肑avaScript實現(xiàn)彈出層效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了JavaScript隨機生成信用卡卡號的方法,涉及javascript操作隨機隨機數(shù)生成信用卡卡號的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS實現(xiàn)的N多簡單無縫滾動代碼,包含了文字及圖文等多種滾動效果,涉及JavaScript遞歸調(diào)用及定時函數(shù)觸發(fā)實現(xiàn)頁面元素動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2015-11-11
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，采用完全獨立于語言的文本格式，是理想的數(shù)據(jù)交換格式。同時，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的API或工具包，接下來跟著小編學(xué)習(xí)js中判斷json的方法吧2015-08-08