題目一:
JavaScript 天小時分鐘和秒倒計時
代碼與解析:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{margin:0;padding:0;list-style:none;
}
body{font-size:18px;text-align:center;
}
.time{height:30px;padding:200px;
}
</style>
<script type="text/javascript">
function GetRTime(){//此函數實現了倒計時效果。var EndTime= new Date('2022/3/20 09:03:00');var NowTime = new Date();var t =EndTime.getTime() - NowTime.getTime();//獲取終點時間和當前時間的毫秒差距。var d=0;//聲明一個變量并初始化為0,用來標識倒計時剩余的天,下面幾個變量也是同樣的道理。var h=0;var m=0;var s=0;if(t>=0){//判斷毫秒差是否大于等于0,如果是,則繼續倒計時效果。d=Math.floor(t/1000/60/60/24);//獲取剩余的天數。h=Math.floor(t/1000/60/60%24);//獲取剩余的小時,當然這里所說的剩余的小時并不是總的剩余的小時數,而是在分鐘這個時間單位上的小時整數,下面的分鐘秒等也是同樣的道理。m=Math.floor(t/1000/60%60);s=Math.floor(t/1000%60);}else{clearTimeout(timer);//如果倒計時結束,那么就結束定時器函數的執行,并跳出此函數。return;}document.getElementById("t_d").innerHTML = d + "天";//顯示倒計時相關的內容,下面也是同樣的道理。document.getElementById("t_h").innerHTML = h + "時";document.getElementById("t_m").innerHTML = m + "分";document.getElementById("t_s").innerHTML = s + "秒";var timer=setTimeout(GetRTime,1000);//利用回調的方式不斷調用GetRTime函數本身。
}
window.onload=function(){GetRTime()
}
</script>
</head>
<body>
<div class="time"> <span id="t_d">00天</span> <span id="t_h">00時</span> <span id="t_m">00分</span> <span id="t_s">00秒</span>
</div>
</body>
</html>
相關知識:
Math.floor()可以對一個數字進行下舍入操作。返回值是小于等于參數,并與之最接近的整數。
getTime方法返回指定時間日期的時間戳。
setTimeout 此方法可以延遲指定時間再去執行規定的代碼。
格式:setTimeout(code,interval)
參數解析:
(1).code:必需,延遲指定時間后要執行的代碼。
(2).interval:必需,規定要延遲的時間,單位是毫秒。