js 网站倒计时

Drizzlejj

于 2021-12-20 17:15:35 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/Drizzlejj/article/details/122045752

1。效果如图

2.上码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="datetime-local">
    </div>
    <div id="times"></div>
    <script>
        var end = document.querySelector('input')
        function _fresh() {
            var endtime = new Date(end.value);
            var nowtime = new Date();
            var leftsecond = parseInt((endtime.getTime()-nowtime.getTime()) / 1000);
            __d = parseInt(leftsecond / 3600 / 24);
            __h = parseInt((leftsecond / 3600) % 24);
            __m = parseInt((leftsecond / 60) % 60);
            __s = parseInt(leftsecond % 60);
            document.getElementById("times").innerHTML = "" + __d + "天 " + "" + __h + "" + "小时 " + "" + __m + "" + "分 " + "" + __s + "" + "秒";
            if (leftsecond <= 0) {
                document.getElementById("times").innerHTML = "活动已结束";
                clearInterval(sh);
            }
        }

    var sh;
    sh = setInterval(_fresh, 1000);
    </script>
</body>
</html>