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

时间 2020-06-14

标签 html 版本倒计时展现栏目 HTML 繁體版

原文原文链接

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

<!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>
复制代码