使用JavaScript设计一个简单的HTML倒计时页面

时间:2021-07-26 00:15:14

在HTML页面中显示倒计时效果,使用js来控制倒计时效果,以下为关键代码:


<div style="text-align:center;margin-top:100px;">
    <span>距离2020年还有:</span>
    <span id="t_d"></span>
    <span id="t_h">00时</span>
    <span id="t_m">00分</span>
    <span id="t_s">00秒</span>
</div>
<script type="text/javascript">
    function getRTime(){
        var EndTime= new Date('2020/1/1 00:00:00'); //截止时间
        var NowTime = new Date();
        var t =EndTime.getTime() - NowTime.getTime();
        
        var d=Math.floor(t/1000/60/60/24);
        var h=Math.floor(t/1000/60/60%24);
        var m=Math.floor(t/1000/60%60);
        var s=Math.floor(t/1000%60);
        
        document.getElementById("t_d").innerHTML = d + "天";
        document.getElementById("t_h").innerHTML = h + "时";
        document.getElementById("t_m").innerHTML = m + "分";
        document.getElementById("t_s").innerHTML = s + "秒";
    }
    setInterval(getRTime,1000);
</script>