JS實現倒計時(天數、時、分、秒)

2019-11-19 18:57:25

字體：大中小

來源：轉載

供稿：網友

本文實例為大家解析了JS實現倒計時的詳細過程，供大家參考，具體內容如下

注釋：
parseInt() 函數可解析一個字符串，并返回一個整數。
語法：
parseInt(string, radix)

例：

parseInt("10"); //返回 10parseInt("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

實現倒計時代碼

html代碼：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>JS實現倒計時(天數,時,分,秒)</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()); //計算剩余的毫秒數   var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //計算剩余的天數   var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //計算剩余的小時   var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鐘   var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數   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的數字前面加上0，例1變為01   if(i<10)   {     i = "0" + i;   }   return i; }  </script>

實現效果：

小編在作者分享的文章基礎上再為大家整理一段完整的代碼，拿去用吧！

<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(); //計算剩余的毫秒數  var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //計算剩余的天數  var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //計算剩余的小時  var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鐘  var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數  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的數字前面加上0，例1變為01  if (i < 10) {  i = "0" + i;  }  return i; } function go(v){ var date1=new Date(),data2=new Date(v); if(data2<date1)return;//設置的時間小于現在時間退出 _ordertimer = setInterval(function(){leftTimer(data2)}, 1000); } </script> </body> </html>

效果圖：