网站中加入新年倒计时效果

第一种方法

  • 建立css样式
/* 倒计时开始 */
.gn_box {
    padding: 10px 14px;
    margin-bottom: 20px;
    text-align: center;
    background-color: #fff;
}
#t_d{
    color: #982585;
    font-size: 18px;
}
#t_h{
    color: #8f79c1;
    font-size: 18px;
}
#t_m{
    color: #65b4b5;
    font-size: 18px;
}
#t_s{
    color: #83caa3;
    font-size: 18px;
}
/* 倒计时结束 */
  • 需要放置倒计时位置插入以下代码
<!--倒计时开始-->
<div class="gn_box">
    <h1>
<font color="#E80017">距</font><font color="#D1002E">2</font><font color="#BA0045">0</font><font color="#A3005C">2</font><font color="#8C0073">2</font><font color="#75008A">年</font><font color="#5E00A1">春</font><font color="#4700B8">节</font><font color="#3000CF">还</font><font color="#1900E6">有</font>
    </h1>
    <center>
      <div id="CountMsg" class="HotDate">
        <span id="t_d">0 天</span> <span id="t_h">0 时</span>
        <span id="t_m">0 分</span> <span id="t_s">0 秒</span>
      </div>
    </center>
  </div>
  <!--时间js-->
  <script type="text/javascript">
      if (document.getElementById("t_d")){
        function getRTime() {
            var EndTime = new Date("2022/02/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);
      }else{
          console.log("新年倒计时不存在");
      }
  </script>
  <!--倒计时结束-->

倒计时效果展示

<!--倒计时开始-->

<div class="gn_box">

<h1>

<font color="#E80017">距</font><font color="#D1002E">2</font><font color="#BA0045">0</font><font color="#A3005C">2</font><font color="#8C0073">2</font><font color="#75008A">年</font><font color="#5E00A1">春</font><font color="#4700B8">节</font><font color="#3000CF">还</font><font color="#1900E6">有</font>

</h1>
<center>
  <div id="CountMsg" class="HotDate">
    <span id="t_d">0 天</span> <span id="t_h">0 时</span>
    <span id="t_m">0 分</span> <span id="t_s">0 秒</span>
  </div>
</center>

</div>
<!--时间js-->
<script type="text/javascript">

  if (document.getElementById("t_d")){
    function getRTime() {
        var EndTime = new Date("2022/02/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);
}else{
console.log("新年倒计时不存在");
}
</script>

<!--倒计时结束-->

第二种方法

将样式写到html代码一起了,可以将此代码放到需要展示的位置。Handsome主题可以通过后台主题设置放置,具体为后台→开发者设置→首页列表最前方广告位。

<style>  
.gn_box{     border: none;     border-radius: 15px; }  .gn_box {     padding: 10px 14px;     margin: 10px;     margin-bottom: 20px;     text-align: center;     background-color: #fff; }  #t_d{     color: #982585;     font-size: 18px; }  #t_h{     color: #8f79c1;     font-size: 18px; }  #t_m{     color: #65b4b5;     font-size: 18px; }  #t_s{     color: #83caa3;     font-size: 18px; }  
</style>  
<div class="gn_box">  
<h1>
<font color=#E80017>2</font>
<font color=#D1002E>0</font>
<font color=#BA0045>2</font>
<font color=#A3005C>2</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>
</h1>
<center> 
<div id="CountMsg" class="HotDate">
<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('2022/01/1 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);      var day = document.getElementById("t_d");     if (day != null) {         day.innerHTML = d + " 天";        }     var hour = document.getElementById("t_h");     if (hour != null) {         hour.innerHTML = h + " 时";       }     var min = document.getElementById("t_m");     if (min != null) {         min.innerHTML = m + " 分";        }     var sec = document.getElementById("t_s");     if (sec != null) {         sec.innerHTML = s + " 秒";     } }      setInterval(getRTime, 1000);  
</script> 
</div>

效果展示

<div class="gn_box">
<h1>
<font color=#E80017>2</font>
<font color=#D1002E>0</font>
<font color=#BA0045>2</font>
<font color=#A3005C>2</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>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<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('2022/01/1 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); var day = document.getElementById("t_d"); if (day != null) { day.innerHTML = d + " 天"; } var hour = document.getElementById("t_h"); if (hour != null) { hour.innerHTML = h + " 时"; } var min = document.getElementById("t_m"); if (min != null) { min.innerHTML = m + " 分"; } var sec = document.getElementById("t_s"); if (sec != null) { sec.innerHTML = s + " 秒"; } } setInterval(getRTime, 1000);
</script>
</div>

最后修改:2022 年 01 月 05 日
如果觉得我的文章对你有用,请随意赞赏鼓励!