先导
写这篇帖子的原因是我很想在博客网站下面添加网站的运行时间,网上虽然有教程是怎么添加的,但是他们演示的主题大都是用
ejs或者是wig来编写的,而我使用的这个个人很喜欢的stun主题却是用pugjs编写的,实在是很想用,所以根据语法的转换规则修改了一份pug文件下添加的脚本来使用,美滋滋
脚本
- 语法参考的话可以去这里
原来的ejs脚本
1<div>
2<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
3<script>
4 var now = new Date();
5 function createtime() {
6 var grt= new Date("08/13/2018 00:00:00");
7 now.setTime(now.getTime()+250);
8 days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
9 hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
10 if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
11 mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
12 seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
13 snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
14 document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
15 document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
16 }
17setInterval("createtime()",250);
18</script>
19</div>
转换后的pugjs脚本
1div
2 span#timeDate 载入天数...
3 span#times 载入时分秒...
4 script.
5 var now = new Date();
6 function createtime() {
7 var grt= new Date("08/13/2018 00:00:00");
8 now.setTime(now.getTime()+250);
9 days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
10 hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
11 if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
12 mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
13 seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
14 snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
15 document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
16 document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
17 }
18 setInterval("createtime()",250);
然后把上述脚本添加到主题的layout/_partials/footer/footer.pug文件中(不同主题可能文件不一样,请自行参考)即可在网页底部显示网站运行时间了OvO,不过要注意修改一下var grt= new Date("08/13/2018 00:00:00");中的起始时间哦!
- 效果
后记
后来发现了一个神奇的网站可以帮助从html转到pug,请戳这里
,难受,虽然上面的不难翻译,但是用这个网站不费力是真的….
评论