原生JS制作网页中的倒计时效果

最新推荐文章于 2025-11-15 10:03:33 发布

原创最新推荐文章于 2025-11-15 10:03:33 发布 · 525 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现网页倒计时效果，通过计算目标日期与当前日期的时间差，转换为天、时、分、秒，并实时更新显示。

今天我们用原生js来写一个网页倒计时效果

代码如下：

<body>

    <span id="time"></span>

<script>
function countdown(n,y,r,s,f){
    var old=new Date();
    var now=new Date(n,y-1,r,s,f);
    var sm=(now.getTime()-old.getTime())/1000;
    //getTime()方法可返回距 1970年1月1日之间的毫秒数
    //我们用目标时间的毫秒数减去当前时间的毫秒数除以1000算出一共有多少秒
    //然后利用秒数转成出天、时、分、秒
    var d=Math.floor(sm/(24*60*60));//计算天数
    var h=Math.floor((sm-d*24*60*60)/3600);//计算小时
    var m=Math.floor((sm-d*24*60*60-h*3600)/60);//计算分钟
    var s=Math.floor(sm-d*24*60*60-h*3600-m*60);//计算秒
    function iszero(date){
        //如果时间的单位小于10，那么会显示个位数，此函数是让小于10的数，前面加0,显示效果变成01时，秒等
        if(date<10){
            date="0"+date;
        }
        return date;
    }
    document.getElementById("time").innerHTML=iszero(d)+"天"+iszero(h)+"时"+iszero(m)+"分"+iszero(s)+"秒";
}

setInterval("countdown(2021,2,15,0,0)",1000);
    </script>


</body>

这个倒计时需要学的就是时间的转换