如果你的网站想要这样的添加底部的运行时间,这就需要使用JavaScript来实现。
首先使用JavaScript的new 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>
然后把这段代码复制到页面的页脚下,就可以啦。
当然如果想跟作者一样追求一点不一样的东西,可以像我这样子🙃,我的网站的代码如下:
<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 -
最后修改:2023年2月2日
共有 0 条评论