您的位置:首页 > Web前端 > JavaScript

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

2016-11-10 17:41 603 查看
在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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐