【玩】HTML 版本的倒计时展示

一款用 HTML 编写的倒计时静态界面, 你可以修改 t.setHours(22);、 t.setMinutes(0); 和 t.setSeconds(0); 调整每日倒计时时间, 你也可以修改描述文字, 很容易找到描述文字的不是吗？你也可以修改 let start_time2 = new Date('2020/6/1 00:00:00') 来表述一个重要日期。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Medusa倒计时</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .time1, .time2 {
            color: brown;
            font-size: 45px
        }

        .description {
            color: darkorange;
            font-size: 45px;
        }
    </style>
</head>
<body>
<div class="Medusa">
    <div>
        <span class="description1 description"></span>
        <span class="time1"></span>
    </div>
    <div>
        <span class="description2 description"></span>
        <span class="time2"></span>
    </div>
</div>
<script>
    setInterval(function () {
        let start_time1 = null;
        let scrip = null;
        let t = new Date();
        t.setHours(22);
        t.setMinutes(0);
        t.setSeconds(0);
        if (new Date().getHours() > 18) {
            start_time1 = t + 24 * 60 * 60 * 1000;
            scrip = '距离明天上班还有'
        } else {
            start_time1 = t
            scrip = '距离今天下班还有'
        }
        let start_time2 = new Date('2020/6/1 00:00:00')

        let now_time = new Date();
        let time1 = start_time1 - now_time;
        let time2 = start_time2 - now_time;
        $('.description1').html(scrip);
        let hour1 = parseInt(time1 / 1000 / 60 / 60 % 24);
        let minute1 = parseInt(time1 / 1000 / 60 % 60);
        let seconds1 = parseInt(time1 / 1000 % 60);
        $('.time1').html(hour1 + "时" + minute1 + "分" + seconds1 + "秒");
        let day2 = parseInt(time2 / 1000 / 60 / 60 / 24);
        let hour2 = parseInt(time2 / 1000 / 60 / 60 % 24);
        let minute2 = parseInt(time2 / 1000 / 60 % 60);
        let seconds2 = parseInt(time2 / 1000 % 60);
        $('.description2').html('距离六一儿童节还有');
        $('.time2').html(day2 + "天" + hour2 + "时" + minute2 + "分" + seconds2 + "秒");
    }, 1000);
</script>

</body>
</html>
复制代码

栈主、嘉宾