添加小站底部显示运行时间功能

AI摘要：本文介绍了如何在博客底部添加显示网站运行时间的功能。首先，在主题的footer.php文件中添加代码，用于计算网站运行时间并显示在页面上。接着，在header.php文件中添加CSS样式，使运行时间显示更加美观。最后，保存文件并刷新网页，即可看到随机颜色显示的网站运行时间。

Powered by Moonshot AI

前言

很多博客底部都会有一个本站运行时间显示，那么应该如何添加呢？本篇文章将分享添加小站底部显示运行时间的源码，希望对大家有帮助

第一步

在主题footer.php添加如下代码

<p id="time">小常的站点正在加载数据.....</p>

<script  type="text/javascript">
    var colorStr="";
    var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
    for(var i=0;i<6;i++){
        colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];
    }
    var now =new Date(); 
    function StorageTime() { 
        var grt= new Date("02/01/2023 00:00:00");//时间格式：月/日/年  时/分/秒
        now.setTime(now.getTime()+250); 
        years = Math.floor((now - grt ) / 1000 / 60 / 60 / 24 /365);
        days = Math.floor((now - grt ) / 1000 / 60 / 60 / 24 - (years * 365)); 
        hours = Math.floor((now - grt ) / 1000 / 60 / 60 - (24 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)));
        if(String(hours).length ==1 ){hours = "0" + hours;} 
        minutes = Math.floor((now - grt ) / 1000 /60 - (24 * 60 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)) - (60 * hours));
        if(String(minutes).length ==1 ){minutes = "0" + minutes;}
        seconds = Math.floor((now - grt ) / 1000 - (24 * 60 * 60 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)) - (60 * 60 * hours) - (60 * minutes)); 
        if(String(seconds).length ==1 ){seconds = "0" + seconds;}
        if(years!=0){var outputtime="本站已安全存活<span>"+years+"</span>年"+"<span>"+days+"</span>天"+"<span>"+hours+"</span>时"+"<span>"+minutes+"</span>分"+"<span>"+seconds+"</span>秒";}else{var outputtime="本站已安全存活<span>"+days+"</span>天"+"<span>"+hours+"</span>时"+"<span>"+minutes+"</span>分"+"<span>"+seconds+"</span>秒";}
        document.getElementById("time").style.color="#"+colorStr;
        document.getElementById("time").innerHTML = outputtime;
    } 
    setInterval("StorageTime()",250);
</script>

第二步

在题header.php底部增加如下代码

<style>
    #time{
        text-shadow: 0px 0px 3px blue;
        text-align: center;
    }
    #time span{
        color: red;
        padding: 0 8px;
    }
</style>

第三步

保存上述文件，刷新网页即可，颜色随机显示。
2023-03-22 23:46:02 星期三