给网站底部添加运行时间

fengsir 2023-1-11 417 1/11

如果你的网站想要这样的添加底部的运行时间,这就需要使用JavaScript来实现。

给网站底部添加运行时间

 

首先使用JavaScriptnew Date()函数,就需要使用一个变量来接受它,然后像这样,就可以获取当前的时间

var date = new Date()

当然你也可以给它设定一个时间,像这样

var time = new Date("2023-01-11:00:00:00")   
//或者是这样
var time = new Date("2023-01-11")
//再具体的方法可以自行度娘

这个函数获取的是当天的毫秒数,所以我们可以这样子处理

// 例如我们网站的上线时间为 2023年1月11日,定义一个变量来接受这个时间点
const Launch_Date = new Date("2023-01-11");
// 现在的时间我们也同样去定义一个变量取接收
let Now_Date = new Date();
// 我们可以用现在的时间减去我们网站的上线时间
let Time_Difference = Now_Date.getTime() - Launch_date.getTime();
// 一天的毫秒数为
let OneDay = 24*60*60*1000;
// 我们将时间差Time_Difference除以一天的毫秒数,然后再取整就可以得到我们的天数
let days = Time_Difference/OneDay
let Days = Math.floor(days);
//接下来是演示如何获取小时,分钟和秒数
let hours = (days - Days)*24;
let Hours = Math.floor(hours);   //获取小时

let min = (hours-Hours)*60;
let Min = Math.floor(min);      //获取分钟

let second = (min-Min)*60;
let Second = Math.floor(Second);  //获取秒

然后我们就可以将他们打印出来,并且循环执行,完整的代码如下:

<span id="span" style="color: #6dd5fa;"></span>   //color可以更改自己喜欢的颜色
<script type = "text/javascript">
   function runtime(){
    const Launch_Date = new Date("2023-01-11:00:00:00");
    let Now_Date = new Date();
    let Time_Difference = Now_Date.getTime() - Launch_Date.getTime();
    const OneDay = 24*60*60*1000;
    let days = Time_Difference/OneDay;
    let Days = Math.floor(days);
    let hours = (days - Days) * 24;
    let Hours = Math.floor(hours);
    let min = (hours - Hours) *60;
    let Min = Math.floor(min);
    let second = (min - Min) * 60;
    let Second = Math.floor(second);
    span.innerHTML = Days + '天' + Hours + '小时' + Min + '分' + Second + '秒'
}
    setInterval(runtime,1000);  //将以1秒的间隔执行runtime这个函数
</script>

然后把这段代码复制到页面的页脚下,就可以啦。

当然如果想跟作者一样追求一点不一样的东西,可以像我这样子🙃wú liáo zhī jí,我的网站的代码如下:

<span id="span" style="color: #6DD5FA;"></span>
<script type="text/javascript">
    function runtime(){
        const Launch_date = new Date("2023-01-07:00:00:00");
        let Now_Date = new Date();
        let Time_Difference = Now_Date.getTime() - Launch_date.getTime();
        const One_year = 12*30*24*60*60*1000;
        const Year = Time_Difference/One_year;
        let years = Math.floor(Year);
        let month = (Year-years)*12;
        let Month = Math.floor(month);
        let days = (month - Month)*30;
        let Days = Math.floor(days);
        let hours = (days - Days)*24;
        let Hours = Math.floor(hours);
        let min = (hours - Hours)*60;
        let Min = Math.floor(min);
        let second = (min - Min)*60;
        let Second = Math.floor(second);
        if (parseInt(Year) == 0){
            if(parseInt(Month) == 0){
                span.innerHTML = '❤️网站已稳定运行:' + Days + '天' + Hours + '小时' + Min + '分' + Second + '秒❤️'
            }
            else{
                span.innerHTML = '❤️网站已稳定运行:' + Month + '月' + Days + '天' + Hours + '小时' + Min + '分' + Second + '秒❤️'
            }
        }
        else{
            span.innerHTML = '❤️网站已稳定运行:' + years + '年' + Month + '月' + Days + '天' + Hours + '小时' + Min + '分' + Second + '秒❤️'
        }
    }
    setInterval(runtime, 1000);
</script>

此外在span这个标签中的color可以更换自己喜欢的颜色,自此在网站底部添加运行时间的代码就🆗啦!

下面是本站的效果,我还在努力🫡!网站也是刚刚开始起步。

给网站底部添加运行时间

 

    - THE END -

    fengsir

    2月02日00:16

    最后修改:2023年2月2日
    0

    共有 0 条评论