javascript实现倒计时效果

最新推荐文章于 2025-10-23 12:22:14 发布

原创最新推荐文章于 2025-10-23 12:22:14 发布 · 628 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #setInterval #倒计时

日常练习--前端小效果专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个带有动画效果的倒计时功能，包括设置定时器、计算剩余时间并实时更新显示。

分析：

1、要实现倒计时，所以需要用到 setInterval 定时器。

2、需要用到Date函数，计算出倒计时的小时数、分钟数、秒数；再用 innerHTML 把倒计时的小时数、分钟数、秒数放入三个盒子里显示出来。

3、用定时器第一次执行时间隔1秒，页面在此期间有空白，所以采用封装函数的方式，先调用一次此函数。

4、时间到了清除定时器 clearInterval() ，加上忽大忽小的动画。

HTML：

<div id="countdown">
        <span>0</span>
        <span>0</span>
        <span>0</span>
</div>

css：

#countdown{
        width:210px;
        height:100px;
}
#countdown span{
        width:60px;
        height:60px;
        float:left;
        margin: 20px 5px;
        background-color: #000;
        color:#fff;
        font-size: 20px;
        line-height: 60px;
        text-align: center;
}
 @keyframes timeUp{
        0%{transform:scale(1.2)}
        50%{transform:scale(1)}
        100%{transform: scale(1.2)}
}

JavaScript：

window.onload=function(){
        var div=document.getElementById("countdown");
        var span=div.getElementsByTagName("span");

        var inputTime=+new Date('2019-8-10 23:00');
        countDown(); //先执行一次，防止第一次刷新页面有空白
        setInterval(countDown,1000);//定时器
        function countDown(){
            var nowTime=+new Date(); //返回当前时间中的毫秒数
            var times=(inputTime-nowTime)/1000; //剩余时间总秒数

             if(times<=0){//时间到了
                 clearInterval(timer);//清除定时器
                for(var i=0;i<span.length;i++){
                    span[i].style.animation="timeUp 0.5s infinite";
                }
                return;
            }

            var h=parseInt(times/60/60%24); //小时
            h=h<10?'0'+h:h; //格式
            span[0].innerHTML=h;
            var m=parseInt(times/60%60);
            m=m<10?'0'+m:m;
            span[1].innerHTML=m;
            var s=parseInt(times%60);
            s=s<10?'0'+s:s;
            span[2].innerHTML=s;
        }
    }