给网站底部添加网站运行时间代码

小乐

日常浏览网站的时候，总是看到一些网站底部会有本站已运行多少天的字样，显得特别高大上，他们是怎么做到的呢？其实这是一段网站运行时间统计代码，现在很多建站程序都自带这种功能，只需要在网站后台开启即可，还有一些程序后台没有这种功能，但是也可以通过安装插件来实现。对于一些无法用上述方式来实现的站点，该如何来做出这种效果呢？其实用一段代码就可以来实现，接下来就来说说怎么给网站底部添加网站运行时间代码。把下面代码完整复制到你的网站模板底部文件中（footer文件），保存即可，当然你也可以把它放置到你想要展示的页面，时间精确到天/时/分/秒。

1. 
   
2.     <style>
   
3.         #span_dt_dt {
   
4.             color: #2F889A;
   
5.         }
   
6.         .time-value {
   
7.             color: #C40000;
   
8.         }
   
9.     </style>
   
10.     <div>
    
11.         本站已运行：<span id="span_dt_dt"></span>
    
12.     </div>
    
13.     <script>
    
14.         function show_date_time() {
    
15.             const BirthDay = new Date("12/03/2023 00:00:00");
    
16.             const today = new Date();
    
17.             const timeold = today.getTime() - BirthDay.getTime();
    
18.             const msPerDay = 24 * 60 * 60 * 1000;
    
19. 
    
20.             const daysold = Math.floor(timeold / msPerDay);
    
21.             const e_hrsold = (timeold / 1000 / 3600) % 24;
    
22.             const hrsold = Math.floor(e_hrsold);
    
23.             const e_minsold = (e_hrsold - hrsold) * 60;
    
24.             const minsold = Math.floor(e_minsold);
    
25.             const seconds = Math.floor((e_minsold - minsold) * 60);
    
26. 
    
27.             document.getElementById('span_dt_dt').innerHTML =
    
28.                 `<span class="time-value">${daysold}</span> 天
    
29.                  <span class="time-value">${hrsold}</span> 时
    
30.                  <span class="time-value">${minsold}</span> 分
    
31.                  <span class="time-value">${seconds}</span> 秒`;
    
32. 
    
33.             window.setTimeout(show_date_time, 1000);
    
34.         }
    
35. 
    
36.         show_date_time();
    
37.     </script>

复制代码

把代码中的BirthDay=new Date(“12/03/2023 00:00:00”);中的12/03/2023 00:00:00，改为你想设置时间。

代码中style="color: #2F889A;"是控制的是天、时、分、秒字体的颜色。

代码中style=color:#C40000是控制时间数值的颜色，可以改为其他颜色，也可以删除。