本文将介绍如何在底栏增加网站已运行时间的显示。
一、仅显示运行天数
1.代码
在网络上找到代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13
| 本站已安全运行了 <b> <strong> <script language = "JavaScript"type = "text/javascript" > var urodz = new Date("12/19/2014"); var now = new Date(); var ile = now.getTime() - urodz.getTime(); var dni = Math.floor(ile / (1000 * 60 * 60 * 24)); document.write( + dni) </script> </strong> </b> 天
|
2.修改
实装后发现此代码与本博客现有主题并不契合,
具体表现为:过于强调的字体、过大的字号
修改如下:
① 去除 < b > 、**< strong >** 等标签
② 通过 样式 修改其字体大小
③ 请修改 new Date(“12/19/2014”)
1 2 3 4 5 6 7 8 9 10 11
| <font style="font-size:85%"> 本站已安全运行了 <script language = "JavaScript"type = "text/javascript" > var urodz = new Date("01/10/2021"); var now = new Date(); var ile = now.getTime() - urodz.getTime(); var dni = Math.floor(ile / (1000 * 60 * 60 * 24)); document.write( + dni) </script> 天 </font>
|
3.实装
此处以 Fluid 主题为例
将 blog-themes-fluid-layout-_partial-footer.ejs
用文本编辑器打开,
将上述代码插入到合适的位置,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <footer class="text-center mt-5 py-3"> <div class="footer-content"> <%- theme.footer.content %> </div>
<font style="font-size:85%"> 本站已安全运行了 <script language = "JavaScript"type = "text/javascript" > var urodz = new Date("01/10/2021"); var now = new Date(); var ile = now.getTime() - urodz.getTime(); var dni = Math.floor(ile / (1000 * 60 * 60 * 24)); document.write( + dni) </script> 天 </font>
<%- partial('_partial/statistics.ejs') %> <%- partial('_partial/beian.ejs') %> <% if(theme.web_analytics.cnzz) { %> <span id="cnzz_stat_icon_<%- theme.web_analytics.cnzz %>" style="display: none"></span> <% } %> </footer>
<%- partial('_partial/scripts.ejs') %>
|
4.效果图
![](https://static.longda.wang/img/20210206111208.png)
二、显示秒分时天
1.代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <div id="days"></div> <script> function show_date_time(){ window.setTimeout("show_date_time()", 1000); BirthDay=new Date("01/10/2021 08:00:00"); today=new Date(); timeold=(today.getTime()-BirthDay.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24; hrsold=setzero(Math.floor(e_hrsold)); e_minsold=(e_hrsold-hrsold)*60; minsold=setzero(Math.floor((e_hrsold-hrsold)*60)); seconds=setzero(Math.floor((e_minsold-minsold)*60)); document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒"; } function setzero(i) { if (i<10) { i="0" + i }; return i; } show_date_time(); </script>
|
2.修改
请修改 BirthDay=new Date("01/10/2021 08:00:00");
的值
3.实装
此处以 Fluid 主题为例
将 blog-themes-fluid-layout-_partial-footer.ejs
用文本编辑器打开,
将上述代码插入到合适的位置,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| <footer class="text-center mt-5 py-3"> <div class="footer-content"> <%- theme.footer.content %> </div>
<div id="days"></div> <script> function show_date_time(){ window.setTimeout("show_date_time()", 1000); BirthDay=new Date("01/10/2021 08:00:00"); today=new Date(); timeold=(today.getTime()-BirthDay.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24; hrsold=setzero(Math.floor(e_hrsold)); e_minsold=(e_hrsold-hrsold)*60; minsold=setzero(Math.floor((e_hrsold-hrsold)*60)); seconds=setzero(Math.floor((e_minsold-minsold)*60)); document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒"; } function setzero(i) { if (i<10) { i="0" + i }; return i; } show_date_time(); </script>
<%- partial('_partial/statistics.ejs') %> <%- partial('_partial/beian.ejs') %> <% if(theme.web_analytics.cnzz) { %> <span id="cnzz_stat_icon_<%- theme.web_analytics.cnzz %>" style="display: none"></span> <% } %> </footer>
<%- partial('_partial/scripts.ejs') %>
|
4.效果图
![](https://static.longda.wang/img/20210206.gif)
参考