利用JavaScript添加网站运行时间

前言

相信大家平时在浏览网页时都看到过在某网页底部信息栏中，存在一行动态计时记录网站运行时间的信息，类似这样的：

这可以利用JavaScript实现。需要有一定的JavaScript基础。下面我就基于之前搭建的个人博客网站来一步步教大家如何给自己的网站添加这一内容信息，重点强调如何利用JavaScript来实现这一功能。

准备

• 1.必备的JavaScript基础知识

• 2.基于Hexo和GiteePages搭建的个人博客

• 基于Hexo和GiteePages搭建的个人博客

• 3.个人博客使用butterfly主题

JavaScript代码实现

首先利用JavaScript代码实现这一功能。 代码解释右滑见每句代码后的注释！

 function show_date_time() {  //创建函数-show_date_time()
     window.setTimeout("show_date_time()", 1000); //设置每隔1000毫秒(也就是1秒)执行一次函数show_date_time()
     BirthDay = new Date("01/21/2021 17:00:00"); //利用New新建一个固定Date对象，网站创建运行起始日期，修改这个日期即可
     today = new Date(); //利用New新建一个当前日期时间的Date对象
     timeold = (today.getTime() - BirthDay.getTime()); //计算时间间隔，取当前日期对象的毫秒数与固定日期对象的毫秒数差值。差值标记为过去的时间即网站运行的时间
     //利用时间间隔(毫秒)分别求出天数、小时、分钟、秒
     sectimeold = timeold / 1000; //转换毫秒单位为秒
     secondsold = Math.floor(sectimeold); //利用Math对象的floor方法取出以秒为单位的整数时间间隔
     msPerYear = 365 * 24 * 60 * 60 * 1000;  //计算出每年所需的毫秒数 
     e_yearsold = timeold / msPerYear;  //利用以毫秒为单位的时间间隔计算出运行的年数，结果为带有小数的值
     yearsold = Math.floor(e_yearsold); //利用Math对象的floor方法将运行的年数化为整数 
     e_daysold = (e_yearsold - yearsold) * 365; //计算出带有小数的运行天数
     daysold = Math.floor(e_daysold); //利用Math对象的floor方法将运行的天数化为整数
     e_hrsold = (e_daysold - daysold) * 24; //计算出带有小数的运行小时数
     hrsold = Math.floor(e_hrsold); //利用Math对象的floor方法将运行的小时数化为整数
     e_minsold = (e_hrsold - hrsold) * 60; //计算出带有小数的运行分钟数
     minsold = Math.floor((e_hrsold - hrsold) * 60); //利用Math对象的floor方法将运行的分钟数化为整数
     seconds = Math.floor((e_minsold - minsold) * 60); //计算出运行的秒数
     if (yearsold == 0) {  //判断运行时间是否大于一年
         showtime.innerHTML = "小站勉强运行了：" + daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒"; // 运行时间小于一年不显示运行年数
     } else {
         showtime.innerHTML = "小站勉强运行了：" + yearsold + "年" + daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
     }
 ​
 }
 show_date_time(); //调用show_date_time()

部分对象方法的使用介绍

1.Window对象的setTimeout() 方法

定义

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒= 1 秒。

语法

 setTimeout(code, milliseconds, param1, param2, ...)
 setTimeout(function, milliseconds, param1, param2, ...)

参数介绍

返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

在这里是设置每隔1000毫秒(也就是1秒)执行一次函数show_date_time()

2.Date对象的getTime() 方法

Date 对象用于处理日期与时间。

利用New创建 Date 对象： new Date()

定义

getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

语法

 Date.getTime()

返回值

指定的日期和时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数。

在这里计算时间间隔，取当前日期对象的毫秒数与固定日期对象的毫秒数差值。差值标记为过去的时间即网站运行的时间

Math 对象的Floor方法

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

定义

floor() 方法返回小于等于x的最大整数。如果传递的参数是一个整数，该值不变。 语法

 Math.floor(x)

参数值

小于等于 x，且与 x 最接近的整数。

在这里利用Math对象的floor方法将计算出的时间间隔向下取整

因为下面是基于为我的个人博客添加这一内容开展的，如果之前按照教程也搭建了自己的博客，并且主题为butterfly的，想为自己的博客添加的这一功能，可以按照本教程步骤继续做。

利用JavaScript为页面添加标签元素

记录网站运行时间的JavaScript代码写完之后，需要在在页面具体位置显示，但是因为我们用的是直接的主题，并不是我们自己写的HTML，于是就需要再次利用JavaScript去为页面的具体位置添加一个标签用来显示这一内容。

JavaScript代码实现：

代码解释右滑见每句代码后的注释！

 var obj = document.createElement("span"); //定义创建span标签
 obj.innerHTML = "<span id=\"showtime\"></span>";//利用innerHTML 属性设置 HTML的内容。
 document.querySelector(".footer_custom_text").appendChild(obj); //将obj内容通过appendChild方法添加到页面中的类名为.footer_custom_text的标签内

注意

将obj内容通过appendChild方法添加到页面中的类名为.footer_custom_text的标签内，也就是网站首页的底部标签栏内。

最后将完整的JS代码文件保存到自己计算机搭建博客的文件夹下文章最后附有完整JS代码

添加到主题设置文件

在自己计算机中找到搭建博客的文件夹，找到themes\butterfly\source\js文件夹下的_config.yml主题设置文件

找到以下内容：

 footer:
   owner:
     enable: true
     since: 2020
      custom_text: </script><br><script src="/js/tj.js"></script>
      copyright: true # Copyright of theme and framework

大约在代码385行左右

在 custom_text:后添加一行引入刚才保存的JS文件即可

 <script src="/js/tj.js"></script>

完整JS代码

 var obj = document.createElement("span");
 obj.innerHTML = "<span id=\"showtime\"></span>";
 document.querySelector(".footer_custom_text").appendChild(obj);
 ​
 function show_date_time() { //创建函数-show_date_time()
     window.setTimeout("show_date_time()", 1000); //设置每隔1000毫秒(也就是1秒)执行一次函数show_date_time()
     BirthDay = new Date("01/21/2021 17:00:00"); //利用New新建一个固定Date对象，网站创建运行起始日期，修改这个日期即可
     today = new Date(); //利用New新建一个当前日期时间的Date对象
     timeold = (today.getTime() - BirthDay.getTime()); //计算时间间隔，取当前日期对象的毫秒数与固定日期对象的毫秒数差值。差值标记为过去的时间即网站运行的时间
     //利用时间间隔(毫秒)分别求出天数、小时、分钟、秒
     sectimeold = timeold / 1000; //转换毫秒单位为秒
     secondsold = Math.floor(sectimeold); //利用Math对象的floor方法取出以秒为单位的整数时间间隔
     msPerYear = 365 * 24 * 60 * 60 * 1000; //计算出每年所需的毫秒数 
     e_yearsold = timeold / msPerYear; //利用以毫秒为单位的时间间隔计算出运行的年数，结果为带有小数的值
     yearsold = Math.floor(e_yearsold); //利用Math对象的floor方法将运行的年数化为整数 
     e_daysold = (e_yearsold - yearsold) * 365; //计算出带有小数的运行天数
     daysold = Math.floor(e_daysold); //利用Math对象的floor方法将运行的天数化为整数
     e_hrsold = (e_daysold - daysold) * 24; //计算出带有小数的运行小时数
     hrsold = Math.floor(e_hrsold); //利用Math对象的floor方法将运行的小时数化为整数
     e_minsold = (e_hrsold - hrsold) * 60; //计算出带有小数的运行分钟数
     minsold = Math.floor((e_hrsold - hrsold) * 60); //利用Math对象的floor方法将运行的分钟数化为整数
     seconds = Math.floor((e_minsold - minsold) * 60); //计算出运行的秒数
     if (yearsold == 0) { //判断运行时间是否大于一年
         showtime.innerHTML = "小站勉强运行了：" + daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒"; // 运行时间小于一年不显示运行年数
     } else {
         showtime.innerHTML = "小站勉强运行了：" + yearsold + "年" + daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
     }
 ​
 }
 show_date_time(); //调用show_date_time()

推荐关注

编程那点事儿