原生效果

2024年-新年倒计时

原生代码

<div class="gn_box">
    <h1>
        <center><font color="#E80017">2</font><font color="#D1002E">0</font><font color="#BA0045">2</font><font
                color="#A3005C">4</font><font color="#8C0073">年</font><font color="#75008A">-</font><font
                color="#5E00A1">新</font><font color="#4700B8">年</font><font color="#3000CF">倒</font><font
                color="#1900E6">计</font><font color="#0200FD">时</font>
        </center>
    </h1>
    <center>
        <div id="CountMsg" class="HotDate">
            <!-- 下面是span 标签之间默认字符 我给隐藏了，H5渲染的慢，给人体验不好-->
            <span id="t_d"></span>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2024/01/01 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }

    setInterval(getRTime, 1000);
    </script>
</div>

优化的代码

效果：

2 0 2 4 年 - 新 年 倒 计 时：

代码如下

<style>
    /* 变色特效*/
    #gn_box_plus {
        animation: change 2s infinite;
        font-weight: 800;
    }
    @keyframes change {
        0% {color: #5cb85c;}
        25% {color: #556bd8;}
        50% {color: #e40707;}
        75% {color: #66e616;}
        100% {color: #67bd31;}
    }
</style>
<div>
    <h1>
        <center id="gn_box_plus">
            <font color="#E80017">2</font>
            <font color="#D1002E">0</font>
            <font color="#BA0045">2</font>
            <font color="#A3005C">4</font>
            <font color="#8C0073">年</font>
            <font color="#75008A">-</font>
            <font color="#5E00A1">新</font>
            <font color="#4700B8">年</font>
            <font color="#3000CF">倒</font>
            <font color="#1900E6">计</font>
            <font color="#0200FD">时：</font>
            <span id="t_d_plus"></span>
            <span id="t_h_plus"></span>
            <span id="t_m_plus"></span>
            <span id="t_s_plus"></span>
        </center>
    </h1>
</div>
<script type="text/javascript">
    /*倒计时*/
    function getRTime() {
        var EndTime = new Date('2024/01/01 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d_plus").innerHTML = d + " 天";
        document.getElementById("t_h_plus").innerHTML = h + " 时";
        document.getElementById("t_m_plus").innerHTML = m + " 分";
        document.getElementById("t_s_plus").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
</script>
特殊说明：
上述文章均是作者实际操作后产出。烦请各位，请勿直接盗用！转载记得标注原文链接：www.zanglikun.com
第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取全部资料 ❤