溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下javascript怎么實現簡單頁面倒計時，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body
{
color:red;
text-align: center;
}
.one{
color:black;
text-align:center;
}
</style>
</head>
<body>
<p>
日期倒計時<br>
請輸入目標日期并點擊按鈕，實現目標日期的倒計時！
</p>
<form name="form1">
<input type="text" id="a" size=1 name="a">年
<input type="text" id="b" size=1 name="b">月
<input type="text" id="c" size=1 name="c">日
<input type="text" id="d" size=1 name="d">時
<input type="text" id="e" size=1 name="e">分
<input type="text" id="f" size=1 name="f">秒
<br>
<div id="time" value="時間"></div>
<script>
function getdate(clock){
var now=new Date();
var y=now.getFullYear()
var m=now.getMonth()
var d=now.getDate()
var day=now.getDay()
var h=now.getHours()
var minu=now.getMinutes()
var s=now.getSeconds()
m+=1;
var array=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
var nowtime=y+"年"+m+"月"+d+"日 "+array[day]+" "+h+"時"+minu+"分"+s+"秒";
clock.innerHTML="當前時間："+nowtime;
}
window.onload=function(){
window.setInterval("getdate(time)",1000)
}
</script>
<input type="button" value="倒計時" onclick="leftTime()">:
距離目標日期還有：
<input type="text" id="cha" >
<script>
var flag=1;var t;
function leftTime(){
if(flag==0){flag=1;}
year=document.getElementById("a").value;
month=document.getElementById("b").value;
day=document.getElementById("c").value;
hour=document.getElementById("d").value;
minute=document.getElementById("e").value;
second=document.getElementById("f").value;
var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date());
//計算剩余的毫秒數
if(leftTime>0){
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);//計算剩余的秒數
document.getElementById("cha").value=days+"天" + hours+"小時" + minutes+"分"+seconds+"秒";
}
else{
document.getElementById("cha").value="0天0小時0分0秒";
alert("主人，時間到啦！")
flag=0;clearInterval(t);
}
if(flag==1){
t=setInterval("leftTime()",1000);
flag=2;
}
}
</script>
</form>
</body>
</html>第一次寫完測試的時候，發現時間到了之后頁面一直不斷彈出提示框，后面百度了下發現每調用一次setInterval周期性調用函數就要設置一次clearInterval來關閉，于是通過設置flag來實現；最終代碼如上所示。運行結果如下：
時間到：
看完了這篇文章，相信你對“javascript怎么實現簡單頁面倒計時”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
