javascript 實現倒計時(天數、時、分、秒)
阿新 • • 發佈:2019-01-07
目標:javascript 實現倒計時
步驟:
1.獲取目前時間並轉換為毫秒數;
2.獲取目標時間並轉換為毫秒數;
3.獲取目前時間與目標時間相差的毫秒數並轉換為倒計時顯示的天數、時、分、秒;
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<style>
body, p {
margin: 0;
padding: 0;
}
#time-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 800px;
height: 100px;
background-color: #e40900;
color: #fff;
font-family: 微軟雅黑;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: auto ;
}
</style>
</head>
<body>
<p id="time-box"></p>
<script>
function countDown(y,m,d,h,min,s){
var time_box = document.getElementById("time-box"); //獲取相應DOM節點
var time_now = new Date().getTime(); //獲取1970至今的毫秒數
var time_target_str = y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s; //將目標時間引數轉換為字串
var time_target = Date.parse(time_target_str); //獲取1970至目標時間的毫秒數
var time_cut = time_target - time_now; //獲取目標時間與目前時間相差的毫秒數
if (time_cut >= 0){
time_box.innerHTML = "距離2018年春節還有:" + Math.floor(time_cut/1000/60/60/24) + "天" + Math.floor(time_cut/1000/60/60%24) + "小時" + Math.floor(time_cut/1000/60%60) + "分" + Math.floor(time_cut/1000%60) + "秒"; //獲取倒計時時間
}else{
time_box.innerHTML = "時光如白駒過隙,轉瞬即逝!";
}
}
window.onload = setInterval("countDown(2018,2,16,0,0,0)",1000); //載入完成後,每隔1s呼叫一次倒計時函式
</script>
</body>
</html>
實現效果: