js实现简单的倒计时

最新推荐文章于 2024-10-01 20:12:28 发布

SKMA

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量81

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Sk22582/article/details/127027512

版权

为了看出效果,简单的做一个样式.

HTML代码

<style>
    span{
        display:block;
        width:600px;
        height:80px;
        line-height:80px;
        background:linear-gradient(40deg,red,blue);
        margin:100px auto;
        color:#fff;
        font-size:26px;
        text-align:center;
    }
</style>

<body>
    <span>距离春节:**天**时**分**秒</span>
</body>

js部分代码

<script>
    var span = document.getElementsByTagName("span")[0];

    //页面初始化
    downCount();
    
    //设置定时器
    var timer = setInterval(downCount,1000);

    function downCount(){
        //获取本地时间
        var nowDate = new Date();

        //目标时间
        var tarDate = new Date("2023/01/22 00:00:00");

        //获取秒差
        var diffSeconds = parseInt((tarDate - nowDate) / 1000);

        //判断
        if(diffSeconds <= 0){
            clearInterval(timer);
        }

        //获取天
        var day = parseInt(diffSeconds / 86400);
        //获取时
        var hour = parseInt(diffSeconds % 86400 / 3600);
        //获取分
        var minutes = parseInt(diffSeconds % 3600 / 60);
        //获取秒
        var seconds = diffSeconds % 60;

        //赋值
        span.innerHTML = "距离春节:" + day + "天" + hour + "时" + minutes + "分" + seconds + "秒";
    }
</script>

效果如图: