网站添加新年倒计时效果代码

博主： Ravo
发布时间：2021 年 01 月 31 日
109次浏览
暂无评论
5094字数
分类： Typecho

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

## 第一种方法

* 建立css样式

```html
/* 倒计时开始 */
.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;
}
/* 倒计时结束 */
```

* 需要放置倒计时位置插入以下代码

```html

<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>
  
  <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>
  
  <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>

最后修改：2021 年 02 月 16 日 01 : 27 PM

如果觉得我的文章对你有用，请随意赞赏鼓励！

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

大名鼎鼎的学生
大佬，时光机页面的动态说说的作者链接为什么是http://ww...
ATTENTION
该评论仅登录用户及评论双方可见
0248
谢谢回复这个朗读软件字数限制不会改OωO你可以改下吗
Charltsing
首发官网 https://www.cnblogs.com/Ch...
0248
请问朗读的字数3000可以变得多一些吗或者没有限制还就是你这...

网站添加新年倒计时效果代码

Ravo • 2021 年 01 月 31 日

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

## 第一种方法

* 建立css样式

* 需要放置倒计时位置插入以下代码

### 倒计时效果展示

## 第二种方法

### 效果展示

网站添加新年倒计时效果代码

发表评论取消回复

Typecho Handsome主题Blog美化记录(备忘)

文字转语音软件《AI配音专家》完全开源！

WeTypecho 小程序出现 cannot read property ‘toLowerCase’ of undefined错误提示解决方法

分享：typecho实现QQ卡片链接，教程案例

typecho免申请开发者应用集成第三方登录插件【v2.0.3】

断路器1P、2P、3P、4P区别

Typecho 博客字体更换

typecho免申请开发者应用集成第三方登录插件【v2.0.3】

Typecho开启HTTPS后不能登陆后台问题

分享：几款漂亮的css美化框

网站添加新年倒计时效果代码

发表评论 取消回复

网站添加新年倒计时效果代码

发表评论取消回复