制作新年倒计时教程

1年前发布 /正在检测是否收录...

0 32 5

温馨提示：

本文最后更新于2023年10月22日，已超过402天没有更新，若内容或图片失效，请留言反馈。

新建index.html

以下代码复制到里面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2024倒计时(xcccx.top)</title>
</head>
<body>
<div id="calendar-line" class="calendar-line" style="margin-top:5px;background:linear-gradient(90deg, rgba(138, 206, 211, 0.7) 0%, rgba(128, 133, 196, 0.7) 0%, rgba(236, 238, 239, 1) 0%, rgba(236, 238, 239, 1) 0%);"><font style="color: rgba(67,8,234,0.67);"><p align="center"><b>距离2024年还差:</b></p></font><div style="font-size:10px;text-align:right;">
    <div class="resourceLoader" style="display:none" data-is-module="false" data-mime="">MediaWiki:EventTimer</div>  
    <body>
        <p id="demo"></p>
        <script>
        // 设置结束倒计时的日期
        const countDownDate = new Date("2023-12-31 23:59:59").getTime();
        // 设置开始倒计时的日期
        const startDownDate = new Date("2023-01-1 00:00:00").getTime();
        // 每秒更新一次
        var x = setInterval(function() {
        // 获取当前时间
        var now = new Date().getTime();
        // 获取当前时间与countDownDate 的时间差
        var distance = countDownDate - now;
        // 获取startDownDate与countDownDate 的时间差
        var downdate = countDownDate - startDownDate;
        // 获取startDownDate与当前时间 的时间差
        var downdate1 = now - startDownDate;
        // 将时间差转为 days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        const percentile = (downdate1 * 100)/downdate;
        document.getElementById("demo").innerHTML = "剩余时间："
            + days + "天 " + hours + "小时"
        + minutes + "分" + seconds + "秒";
        document.getElementById("calendar-line").style.background = "linear-gradient(90deg, rgba(138, 206, 211, 0.7) 0%, rgba(128, 133, 196, 0.7) " + percentile + "%, rgba(236, 238, 239, 1) " + percentile + "%, rgba(236, 238, 239, 1) 100%)";
        // 若是时间差耗尽，结束定时器
        if (distance < 0) {
             clearInterval(x);
             document.getElementById("demo").innerHTML = "2024你好!。";
             document.getElementById("calendar-line").style.background = "linear-gradient(90deg, rgba(138, 206, 211, 0.7) 0%, rgba(128, 133, 196, 0.7) 0%, rgba(236, 238, 239, 1) 0%, rgba(236, 238, 239, 1) 100%)";
          }
        }, 1000);
          </script>
        </body>
    <span class="eventTimer" data-start="2022/04/27 20:00" data-end="2022/09/26 19:59:35" data-info="活动"></span></div></div>
</body>
</html>