簡單實現(xiàn)JS倒計時效果
本文實例為大家分享了JS倒計時效果的具體代碼,供大家參考,具體內容如下
Index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒計時</title> <script> function toTwo(n) { if(n>9) { return ''+n; } else { return '0'+n; } } window.onload=function(){ var oBox=document.getElementById('box'); var aImg=oBox.getElementsByTagName('img'); function time() { var enddate=new Date('2016/12/25 00:00:00'); var mydate=new Date(); var str=''; var t=enddate.getTime()-mydate.getTime(); str=toTwo(Math.floor(t/1000/60/60/24))+toTwo(Math.floor(t/1000/60/60%24))+toTwo(Math.floor(t/1000/60%60))+toTwo(Math.floor(t/1000%60)); for(var i=0;i<aImg.length;i++) { aImg[i].src='images/'+str[i]+'.png'; } } time(); setInterval(time,1000); }; </script> <style> #box { width:1000px; height:200px; font-size:14px; line-height:100px; margin:auto; } #box img{ width:30px; height:60px; } </style> </head> <body> <div id="box"> <img src="images/0.png" /> <img src="images/0.png" /> 天: <img src="images/0.png" /> <img src="images/0.png" /> 時: <img src="images/0.png" /> <img src="images/0.png" /> 分: <img src="images/0.png" /> <img src="images/0.png" /> 秒 </div> </body> </html>
運行結果如圖:
上面的圖片需要
方法二、JavaScript倒計時欄的實現(xiàn)
這邊小編也是剛剛過完雙11呀(快遞還沒有到很絕望),剁完手來寫上這新學的知識。雙十一很多電商網(wǎng)站隨處可見倒計時的框圖那他們到底是怎樣實現(xiàn)的時刻計時。
主要用法在于對js中Data對象的方法,話不多說直接擼上代碼,主要難點在于對每一項時間的獲取
<style> #countdown{ margin: 200px auto; font-size: 20px; text-align: center; color: red; } </style> <script> window.onload=function(){ var enddata=new Date("2018/12/12 00:00:00"); //這邊是自定義的截止時間 var div=document.getElementById("countdown"); function hold(){ var nowtime=new Date(); //每一次執(zhí)行獲取當前時間 var second=parseInt((enddata.getTime()-nowtime.getTime())/1000); var minute=parseInt(second/60%60); var hour=parseInt(second/3600%24); var day=parseInt(second/3600/24); second=second%60; second<10 ? second="0"+second : second; //此下四行確保格式每一位數(shù)都是標準的兩位 minute<10 ? minute="0"+minute : minute; hour<10 ? hour="0"+hour : hour; day<10 ? day="0"+day : day; div.innerHTML="距離雙十二開搶還有"+day+"天"+hour+"小時"+minute+"分"+second+"秒"; } setInterval(hold,1000); //每一秒執(zhí)行一次,這邊第二個參數(shù)為毫秒單位 } </script> <body> <div id="countdown"></div> </body>
效果圖如下(動態(tài)變化):
主要在于setInterval(); 方法,其余部分小編已經(jīng)寫上了備注,當然這邊只是簡單的寫了一下樣式。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
js 模塊化CommonJS AMD UMD CMD ES6規(guī)范詳解
這篇文章主要為大家介紹了js 模塊化CommonJS AMD UMD CMD ES6規(guī)范詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04用javascript實現(xiàn)li 列表數(shù)據(jù)隔行變換背景顏色
客戶端效果,效率自然不錯。以前的做法是偶數(shù)行時給li加一個class,方法當然不可取,如果后臺讀取再加class就很麻煩了,看看這個效果2007-08-08