JavaScript的兩個計時器setInterval 和setTimeout 來簡單的寫一個當天的時間倒計時,主要就是時間的計算,先看下實作當天時間的倒計時,全部代碼:
<html>
<head>
<meta charset="UTF-8"/>
<title>count down</title>
<style type="text/css">
body{
background-color: #00502D;
color: #ffffff;
}
#show{
position: absolute;
bottom: 0;
right: 20px;
}
</style>
</head>
<body>
<h2 id="show"></h2>
<script type="text/javascript">
var fuTime = new Date("2018/6/26 18:00:00");
var timer = "";
//setInterval 延時1秒
// timer = setInterval(function (){
// var now = new Date();
// var hour = parseInt((fuTime-now)/1000/60/60);
// hour<10 && (hour = "0"+hour);
// var min = parseInt((fuTime-now)%(1000*60*60)/1000/60);
// min<10 && (min = "0"+min);
// var sec = parseInt((fuTime-now)%(1000*60)/1000);
// sec<10 && (sec = "0"+sec);
// document.getElementById("show").innerHTML = hour+" : "+min+" : "+sec;
// if(hour==0 && min==0 && sec==0){
// clearTimeout(timer);
// timer = null;
// }
// },1000);
//setTimeout
(function show(){
var now = new Date();
var hour = parseInt((fuTime-now)/1000/60/60);
hour<10 && (hour = "0"+hour);
var min = parseInt((fuTime-now)%(1000*60*60)/1000/60);
min<10 && (min = "0"+min);
var sec = parseInt((fuTime-now)%(1000*60)/1000);
sec<10 && (sec = "0"+sec);
document.getElementById("show").innerHTML = hour+" : "+min+" : "+sec;
timer = setTimeout(show,1000);
if(hour==0 && min==0 && sec==0){
clearTimeout(timer);
timer = null;
}
})();
</script>
</body>
</html>
其中兩種方法都寫了,也注釋出來了,setInterval的話會有一秒的延時,我沒有處理,如果想用這個方法,那就在計時器開始之前先計算結果把它顯示一下就可以了
如果想要倒計時天數,那就這樣寫,隻寫JS部分:
var now = new Date();
var day = parseInt((fuTime-now)/1000/60/60/24);
var hour = parseInt((fuTime-now)%(1000*60*60*24)/1000/60/60);
var min = parseInt((fuTime-now)%(1000*60*60)/1000/60);
var sec = parseInt((fuTime-now)%(1000*60)/1000);
document.getElementById("show").innerHTML =day+" 天 "+ hour+" 小時 "+min+" 分鐘 "+sec+" 秒 ";
timer = setTimeout(show,1000);
if(hour==0 && min==0 && sec==0){
clearTimeout(timer);
timer = null;
}
主要就是計算的麻煩一點