JS實現(xiàn)倒計時(天數(shù)、時、分、秒)
本文實例為大家解析了JS實現(xiàn)倒計時的詳細過程,供大家參考,具體內(nèi)容如下
注釋:
parseInt() 函數(shù)可解析一個字符串,并返回一個整數(shù)。
語法:
parseInt(string, radix)

例:
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定:返回 10 或 8
實現(xiàn)倒計時代碼
html代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>JS實現(xiàn)倒計時(天數(shù),時,分,秒)</title> </head> <body onload="leftTimer()"> <h2>剩余時間:</h2> <div id="timer"></div> </body> </html>
javascript代碼:
<script language="javascript" type="text/javascript">
function leftTimer(year,month,day,hour,minute,second){
var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //計算剩余的毫秒數(shù)
var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //計算剩余的天數(shù)
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //計算剩余的小時
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鐘
var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數(shù)
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
setInterval("leftTimer(2016,11,11,11,11,11)",1000);
document.getElementById("timer").innerHTML = days+"天" + hours+"小時" + minutes+"分"+seconds+"秒";
}
function checkTime(i){ //將0-9的數(shù)字前面加上0,例1變?yōu)?1
if(i<10)
{
i = "0" + i;
}
return i;
}
</script>
實現(xiàn)效果:

小編在作者分享的文章基礎(chǔ)上再為大家整理一段完整的代碼,拿去用吧!
<html>
<body>
<input type="text" value="" id="date2">
<input type="button" onclick="go(document.getElementById('date2').value);" value="開始">
<div id="timer"></div>
<script type="text/javascript">
// 倒計時
var _ordertimer = null;
var data=new Date();
document.getElementById("date2").value=data.getFullYear()+'-'+(data.getMonth()+1)+'-'+data.getDate()+' '+data.getHours()+':'+data.getMinutes()+':'+data.getSeconds();//當前時間
function leftTimer(enddate) {
var leftTime = (new Date(enddate)) - new Date(); //計算剩余的毫秒數(shù)
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //計算剩余的天數(shù)
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //計算剩余的小時
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鐘
var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數(shù)
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) document.getElementById("timer").innerHTML = days + "天" + hours + "小時" + minutes + "分" + seconds + "秒";
if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
window.clearInterval(_ordertimer);
_ordertimer = null;
}
}
function checkTime(i) { //將0-9的數(shù)字前面加上0,例1變?yōu)?1
if (i < 10) {
i = "0" + i;
}
return i;
}
function go(v){
var date1=new Date(),data2=new Date(v);
if(data2<date1)return;//設(shè)置的時間小于現(xiàn)在時間退出
_ordertimer = setInterval(function(){leftTimer(data2)}, 1000);
}
</script>
</body>
</html>
效果圖:

相關(guān)閱讀:
基于JS代碼實現(xiàn)簡單易用的倒計時 x 天 x 時 x 分 x 秒效果
基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新,頁面關(guān)閉不進行倒計時功能)
更多關(guān)于倒計時的文章請查看專題: 《倒計時功能》
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript對數(shù)組的常用操作代碼 數(shù)組方法總匯
js下數(shù)組也是比較常用的,對數(shù)組元素的處理也是有非常多的方法,這里整理了下,需要的朋友可以參考下。2011-01-01
JS實現(xiàn)訪問DOM對象指定節(jié)點的方法示例
這篇文章主要介紹了JS實現(xiàn)訪問DOM對象指定節(jié)點的方法,結(jié)合實例形式分析了javascript針對DOM元素節(jié)點屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
讓瀏覽器非阻塞加載javascript的幾種方法小結(jié)
通常大多數(shù)瀏覽器是并行下載資源的,但由于外部腳本的特殊性例如通過腳本改變文檔的DOM結(jié)構(gòu)、腳本之間的存在依賴關(guān)系、使用document.write 向頁面輸出HTML等。2011-04-04

