我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

虽然春节已经过去,但是2023年的春节永远停留在了那一刻,无论是开心还是兴奋都是实实在在地存在.但是现在我们已经上班了,所以记录一下距离春节已经过去多久了.

html代码

<div>
    <h1><font color="ff0000"></font><div class="text" style=" text-align:center;"><font color="ff0000"><img class="wp-smiley" src="https://cdn.qqsuu.cn/Gallery/denglong.gif" alt="网站春节倒计时代码分享" title="灯笼" alt="灯笼">春节进行时时<img class="wp-smiley" src="https://cdn.qqsuu.cn/Gallery/denglong.gif" alt="网站春节倒计时代码分享" title="灯笼" alt="灯笼"></font></div></h1>
    <h3 id="title-1"><div class="text" style=" text-align:center;">2023年春节时间：2023年1月21日 星期六<img class="wp-smiley" src="https://cdn.qqsuu.cn/Gallery/meigui.png" alt="网站春节倒计时代码分享" title="玫瑰" alt="玫瑰"></div></h3>
    <h3 id="title-2"><div class="text" style=" text-align:center;"><img class="wp-smiley" src="https://cdn.qqsuu.cn/Gallery/taiyang.png" alt="网站春节倒计时代码分享" title="太阳" alt="太阳">距离2023年春节过年已过去<img class="wp-smiley" src="https://cdn.qqsuu.cn/Gallery/89.png" alt="网站春节倒计时代码分享"></div></h3>
    <div><div class="text" style=" text-align:center;">
        <span id="t_d">00</span>
        <span id="t_h">00</span>
        <span id="t_m">00</span>
        <span id="t_s">00</span>
    </div>

html代码较简单就是div元素组合起来,上面显示2023年春节的时间,下面显示已经过去多久了.

js代码

    function getRTime(){
        var EndTime= new Date('2023/01/21 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);

首先我们需要将春节的时间用new Date()格式化一下,然后与现在的时间相比较得出差值,然后通过时分秒的特点计算出具体的差值.最后用setInterval每秒执行一次.