JS實現倒計時圖文效果

2019-11-19 12:30:16

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了JS實現倒計時圖文效果的具體代碼，供大家參考，具體內容如下

<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">  //獲取節點對象  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');  //函數調用  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 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);  //改變圖片地址(下面兩種方法都可以實現圖片地址的變化)    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); } //添零函數 function  setNum(num){    if(num<10){      num="0"+num;    }    return num;  }  </script></body>

見下圖：