JS实现倒计时效果

不会写代码的小刘c

已于 2023-03-11 16:30:23 修改

阅读量4.7k

点赞数 6

文章标签： javascript 开发语言 ecmascript

于 2023-03-11 14:25:55 首次发布

本文链接：https://blog.csdn.net/m0_46783393/article/details/129463161

版权

JS实现倒计时效果如下：

主要是需要条件如下：

var nowTime = +new Date(); //获取当前总毫秒数

var inputTime = +new Date(time); //用户输入的总毫秒数

times = (inputTime - nowTime) / 1000; //剩余的总秒数

然后将总剩余秒数转换成天时分秒

通过setInterval()方法设置定时器，待倒计时为0时，判断并使用clearInterval()清除定时器

全部代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        font-size: 10vw;
        text-align: center;
    }
</style>

<body>
    <p></p>
</body>
<script>
    //倒计时  主要得到用户输入的时间减掉当前总毫秒数
    //将times剩下总时间设置全局变量  方便倒计时函数可以调用
    var times = null;

    function countDown(time) {
        var nowTime = +new Date(); //获取当前总毫秒数
        var inputTime = +new Date(time); //用户输入的总毫秒数
        times = (inputTime - nowTime) / 1000; //剩余的总秒数
        //转换为天
        var d = parseInt(times / 60 / 60 / 24);
        //转换为时
        var h = parseInt(times / 60 / 60 % 24);
        //设置成时钟格式 00：00：00 利用三元运算符
        h = h < 10 ? "0" + h : h
        //转换为分
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? "0" + m : m
        //转换成秒
        var s = parseInt(times % 60);
        s = s < 10 ? "0" + s : s

        return d + "天 " + h + ":" + m + ":" + s;
    }

    var p = document.querySelector("p");
    var timer = setInterval(function() {
        p.innerText = countDown('2023-03-12 12:00:00');
        if (times < 0) {
            clearInterval(timer)
        }

    }, 1000);
</script>

</html>

time用户输入的时间可以自己设置。

不会写代码的小刘c

关注

6
点赞
踩
33

收藏

觉得还不错? 一键收藏
3
评论
JS实现倒计时效果

通过setInterval()方法设置定时器，待倒计时为0时，判断并使用clearInterval()清除定时器。//用户输入的总毫秒数。//获取当前总毫秒数。time用户输入的时间可以自己设置。然后将总剩余秒数转换成天时分秒。
复制链接

扫一扫