溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了JS實現倒計時圖文效果的具體代碼，供大家參考，具體內容如下
<body>
<img src="images/0.png" id="h2">
<img src="images/0.png" id="h3">
<img src="images/second1.png" >
<img src="images/0.png" id="m1">
<img src="images/0.png" id="m2">
<img src="images/second1.png" >
<img src="images/0.png" id="s1">
<img src="images/0.png" id="s2">
<script type="text/javascript">
//獲取節點對象
var oH1=document.getElementById('h2');
var oH2=document.getElementById('h3');
var oM1=document.getElementById('m1');
var oM2=document.getElementById('m2');
var oS1=document.getElementById('s1');
var oS2=document.getElementById('s2');
//函數調用
getTime();
function getTime(){
//獲取截止時間到1970年之間的毫秒數
var endTime=new Date('2018-07-13 12:00:00').getTime();
//獲取當前時間到1970年之間的毫秒數
var nowTime=new Date().getTime();
//時間差（毫秒）
var leftTime=endTime-nowTime;
//獲取時分秒
var h=parseInt(leftTime/1000/3600);//獲得剩余的小時數
var m=parseInt(leftTime/1000/60%60);//獲得剩余的分鐘
var s=parseInt(leftTime/1000%60);//獲得剩余的秒數
//加零(無論是小時還是分鐘還是秒數都會有單個數的時候，所以可以通過加零來讓其變成兩位數)
h=setNum(h);
m=setNum(m);
s=setNum(s);
//雙位數變成單位數
var h2=h%10;
var h3=parseInt(h/10);
var m1=m%10;
var m2=parseInt(m/10);
var s1=s%10;
var s2=parseInt(s/10);
//改變圖片地址(下面兩種方法都可以實現圖片地址的變化)
oH1.setAttribute('src','images/'+h3+'.png');
oH2.setAttribute('src','images/'+h2+'.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/'+h3+'.png';
oH2.src='images/'+h2+'.png';
oM1.src='images/'+m2+'.png';
oM2.src='images/'+m1+'.png';
oS1.src='images/'+s2+'.png';
oS2.src='images/'+s1+'.png';*/
setTimeout(getTime,1000);
}
//添零函數
function setNum(num){
if(num<10){
num="0"+num;
}
return num;
}
</script>
</body>
見下圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
