使用定時器實現倒計時
setInterval()和setTimeout()
區(qū)別原文地址
????setTimeout() :函數或字符串在指定的毫秒數之后執(zhí)行脖卖。它返回一個整數，表示定時器的編號巧颈，這個值可以傳遞給clearTimeout()用于取消這個函數的執(zhí)行;
????setInterval():setInterval的用法與setTimeout幾乎完全一致，區(qū)別僅僅在于setInterval指定某個任務每隔一段時間就執(zhí)行一次袖扛，也就是無限次的定時執(zhí)行 ;
1.setInterval();
<html><head><meta charset="UTF-8">
?????<title>簡單時長倒計時</title>
????????????<SCRIPT type="text/javascript">
?????????????????var maxtime = 60 * 60; //一個小時砸泛，按秒計算十籍，自己調整!
?????????????????function CountDown() {
?????????????????????????????if (maxtime >= 0) {
?????????????????????????????????????minutes = Math.floor(maxtime / 60);
?????????????????????????????????????seconds = Math.floor(maxtime % 60);
?????????????????????????????????????msg = "距離結束還有" + minutes + "分" + seconds + "秒";
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?document.all["timer"].innerHTML = msg;
?????????????????????????????????????if (maxtime == 5 * 60)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("還剩5分鐘");
?????????????????????????????????????--maxtime;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} else{? ?
????????????????????????????????//記得在倒計時完成關掉計時器,參數是創(chuàng)建計時器是返回的編號
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?clearInterval(timer);
?????????????????????????????????????alert("時間到，結束!");
?????????????????????????????????}
? ? ? ? ? ? ? ? ? }
?????????????????timer = setInterval("CountDown()", 1000);
?????????????</SCRIPT>
? ? ? ? </head>
????????<body>
????????????????<div id="timer" style="color:red">
? ? ? ? ? ? ? ? </div><div id="warring" style="color:red"></div>
?????????</body>
?</html>
2.setTimeout
<html>
?????<head>
?????????<meta charset="UTF-8">
? ? ? ? ? <title>js簡單時分秒倒計時</title>
????????????<script type="text/javascript">
? ? ? ? ? ? ? ? ? ????function countTime() {
? ? ? ? ? ? ? ? ? ? ? ? //獲取當前時間
? ? ? ? ? ? ? ? ? ? ? ? ?var date = new Date();
? ? ? ? ? ? ? ? ? ? ? ? ?var now = date.getTime();
? ? ? ? ? ? ? ? ? ? ? ? //設置截止時間 var str="2019/5/17 00:00:00";
?????????????????????????var endDate = new Date(str);
?????????????????????????var end = endDate.getTime();
?????????????????????????//時間差
? ? ? ? ? ? ? ? ? ? ? ? ?var leftTime = end-now;
?????????????????????????//定義變量 d,h,m,s保存倒計時的時間
?????????????????????????var d,h,m,s;
?????????????????????????if (leftTime>=0) {
?????????????????????????????d = Math.floor(leftTime/1000/60/60/24);//天
?????????????????????????????h = Math.floor(leftTime/1000/60/60%24);//時
?????????????????????????????m = Math.floor(leftTime/1000/60%60);//分
?????????????????????????????s = Math.floor(leftTime/1000%60); } //秒
????????????????????????????//將倒計時賦值到div中
? ? ? ? ? ? ? ? ? ? ? ? ? ? document.getElementById("_d").innerHTML = d+"天";
? ? ? ? ? ? ? ? ? ? ? ? ? ? document.getElementById("_h").innerHTML = h+"時";
? ? ? ? ? ? ? ? ? ? ? ? ? ? document.getElementById("_m").innerHTML = m+"分";
?????????????????????????????document.getElementById("_s").innerHTML = s+"秒";
? ? ? ? ? ? ? ? ? ? ? ? ? ? //遞歸每秒調用countTime方法唇礁，顯示動態(tài)時間效果
????????????????????????????//為了更準確得的顯示結果把參數毫秒設的更小一些
? ? ? ? ? ? ? ? ? ? ? ? ? ? setTimeout(countTime,500);
?????????????????????????}
?????????????????</script>
????</head >
?????????<body onload="countTime()" >
?????????????????<div>
?????????????????????<span id="_d">00</span>
? ? ? ? ? ? ? ? ????? <span id="_h">00</span>
?????????????????????<span id="_m">00</span>
?????????????????????<span id="_s">00</span>
?????????????????</div>
????????</body>
</html>
引用地址JS倒計時兩種種實現方式
浪客行1213的簡書
