menu Tonm's Blog
Typecho底部添加博客运行天数的时间代码
4719 浏览 | 2020-03-10 | 阅读时间: 约 1 分钟 | 分类: 代码∷插件 | 标签: Typecho,美化
report请注意,本文编写于 1673 天前,最后修改于 1610 天前,其中某些信息可能已经过时。

首先我们先在文章想要显示的地方加上以下代码,一般我们添加在文章的版权部分,有的主题版权部分可能在functions.php中,也可能在footer.php中(总之添加在文章的版权部分就对了,根据主题的不同,自行寻找版权部分呀)

<p id="time">Tonm's Blog 的站点正在加载数据.....</p>

总之我是添加在这里哒

然后我们在到footer.php文件中添加JS

<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("03/02/2020 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里加个CSS样式就大功告成了

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

以下是最终的效果,颜色随机显示

取消

感谢您的支持,我会继续努力哒!

扫码打赏
支付金额随意哦!

打开支付宝扫一扫,即可进行扫码打赏哦

本文遵循 CC 4.0 BY-SA 版权协议

正在加载数据...

keyboard_arrow_left上一篇
下一篇keyboard_arrow_right

发表评论

email
fingerprint
web

全部评论 (共 6 条评论)

    2020-04-07 13:16
    嗯嗯不错,要研究一下,偷偷告诉你,你网站真的有点卡,该优化一下
      2020-04-07 13:24
      @miss不慌问题不大
    2020-04-07 11:35
    日常冒泡
      2020-04-07 11:52
      @梦轲老板好! :xhl13:
    米卡
    2020-03-20 08:00
    ――
      2020-03-20 08:59
      @米卡