快捷導(dǎo)航

JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)

更新時(shí)間：2016年11月16日 17:23:57 作者：csdn9_14

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)倒計(jì)時(shí)，精確到天數(shù)、時(shí)、分、秒，還為大家分享了parseInt() 函數(shù)的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家解析了JS實(shí)現(xiàn)倒計(jì)時(shí)的詳細(xì)過程，供大家參考，具體內(nèi)容如下

注釋：
parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(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

實(shí)現(xiàn)倒計(jì)時(shí)代碼

html代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" > 
<title>JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù),時(shí),分,秒)</title> 
 
</head> 
<body onload="leftTimer()"> 
 
<h2>剩余時(shí)間:</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()); //計(jì)算剩余的毫秒數(shù) 
 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //計(jì)算剩余的天數(shù) 
 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //計(jì)算剩余的小時(shí) 
 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計(jì)算剩余的分鐘 
 var seconds = parseInt(leftTime / 1000 % 60, 10);//計(jì)算剩余的秒數(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+"小時(shí)" + minutes+"分"+seconds+"秒"; 
} 
function checkTime(i){ //將0-9的數(shù)字前面加上0，例1變?yōu)?1 
 if(i<10) 
 { 
 i = "0" + i; 
 } 
 return i; 
} 
 
</script>

實(shí)現(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">
 // 倒計(jì)時(shí)
 var _ordertimer = null;
 var data=new Date();
 document.getElementById("date2").value=data.getFullYear()+'-'+(data.getMonth()+1)+'-'+data.getDate()+' '+data.getHours()+':'+data.getMinutes()+':'+data.getSeconds();//當(dāng)前時(shí)間
 function leftTimer(enddate) {
 var leftTime = (new Date(enddate)) - new Date(); //計(jì)算剩余的毫秒數(shù)
 var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //計(jì)算剩余的天數(shù)
 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //計(jì)算剩余的小時(shí)
 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計(jì)算剩余的分鐘
 var seconds = parseInt(leftTime / 1000 % 60, 10);//計(jì)算剩余的秒數(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 + "小時(shí)" + 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è)置的時(shí)間小于現(xiàn)在時(shí)間退出
 _ordertimer = setInterval(function(){leftTimer(data2)}, 1000);
 }
 </script>
 </body>
 </html>

效果圖：