【玩】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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。