js倒計時簡單實現(xiàn)代碼
更新時間:2016年08月11日 09:01:52 作者:jineslee
這篇文章主要為大家詳細介紹了js倒計時簡單實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
倒計時:
1.設置一個有效的結束日期
2.計算剩余時間
3.將時間轉換成可用的格式
4.輸出時鐘數(shù)據作為一個可重用的對象
5.在頁面上顯示時鐘,并在它到達0時停止
html
<div id="clock"> <span id="days"></span>天 <span id="hours"></span>時 <span id="minutes"></span>分 <span id="seconds"></span>秒 </div>
js代碼
<script><br>/*計算剩余時間*/
function getTimeReamin(endtime){
//剩余的秒數(shù)
var remainSec=(Date.parse(endtime)-Date.parse(new Date()))/1000;
var days=Math.floor(remainSec/(3600*24));
var hours=Math.floor(remainSec/3600%24);
var minutes=Math.floor(remainSec/60%60);
var seconds=Math.floor(remainSec%60);
return{"remainSec":remainSec,
"days":days,
"hours":hours,
"minutes":minutes,
"seconds":seconds
}
}
var endtime="2016/10/10";
var clock=document.getElementById("clock");
//設置定時器
var timeid=setInterval(function () {
var t=getTimeReamin(endtime);
//判斷時間格式
days= t.days>=0&& t.days<10?"0"+t.days:t.days;
hours= t.hours>=0&& t.hours<10?"0"+t.hours:t.hours;
minutes=t.minutes>=0&&t.minutes<10?"0"+t.minutes:t.minutes;
seconds=t.seconds>=0&&t.seconds<10?"0"+t.seconds:t.seconds;
//設置時間
document.getElementById("days").innerText= days;
document.getElementById("hours").innerText= hours;
document.getElementById("minutes").innerText= minutes;
document.getElementById("seconds").innerText=seconds;
//清除定時器
if(t.remainSec<=0){
clearInterval(timeid);
}
});
<script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
如何在js中讓函數(shù)睡眠多少秒? 經常會有Javascript初學者提出這樣的問題,自從js出現(xiàn)以來.2010-08-08

