我網站創建多久了?
每個架設網站的人多少都有想這個問題，畢竟時間流逝的很快，總需要一個提醒來告訴自己，因此我剛架設這個網站好沒兩天就把這個功能給生出來了
由於本站使用的是Wordpress主題 ” Agron “，其提供了十分方便在頁尾透過HTML語法編輯文本以及JavaScript腳本功能，因此可以很簡單的實現這個功能而不用複雜的設定許多東西
Argon佈景主題的開源地址 :
正文開始
首先，要在Agron設定中的”腳本”目錄中，找到”頁尾腳本”加入這段程式碼 :
<script no-pjax="">
//頁面每次跳轉都會執行window.pjaxLoaded = function(){}內的程式碼
window.pjaxLoaded = function(){
let blog_running_days=document.getElementById("blog_running_days");
let blog_running_hours=document.getElementById("blog_running_hours");
let blog_running_mins=document.getElementById("blog_running_mins");
let blog_running_secs=document.getElementById("blog_running_secs");
function refresh_blog_running_time(){
let time = new Date() - new Date(2021, 7, 25, 0, 0, 0);
let d=parseInt(time/24/60/60/1000);
let h=parseInt(time%(24*60*60*1000)/60/60/1000);
let m=parseInt(time%(60*60*1000)/60/1000);
let s=parseInt(time%(60*1000)/1000);
blog_running_days.innerHTML=d;
blog_running_hours.innerHTML=h;
blog_running_mins.innerHTML=m;
blog_running_secs.innerHTML=s;
};
refresh_blog_running_time();
if (typeof(bottomTimeIntervalHasSet) == "undefined"){
let bottomTimeIntervalHasSet = true;
setInterval(function(){refresh_blog_running_time();},500);
};
};
window.pjaxLoaded(); //手動執行 window.pjaxLoaded 讓網頁在第一次載入時也會執行這段腳本
</script>
2021-08-27 16 : 13 更新
必須加上之前忘記加了
window.pjaxLoaded = function(){ } 才能讓網頁換頁之後JavaScritp腳本會刷新執行 其中 let time = new Date() - new Date(2021, 7, 25, 0, 0, 0); 對應的是時間開始計算的起始點，要注意的是這邊的時間是UNIX時間，月份的計算是從0開始計算的!我就踩了這個坑
如果沒計算好你就會跟我一樣變成時空旅人了
當把這段程式碼中唯一需要更改部分修改完之後，就可以往頁尾開始加顯示的文字了
這邊需要用到一點點HTML和JavaScript的知識，整合起來差不多是這樣 :
<div>
本站已運行 : <span id="blog_running_days"> </span>天<span id="blog_running_hours"> </span>時<span id="blog_running_mins"> </span>分又<span id="blog_running_secs"> </span>秒
</div>
<div>
Background : <a href="https://www.pixiv.net/artworks/82042965/">Pixiv 82042965</a>☀ & <a href="https://www.pixiv.net/artworks/82042965/">Pixiv 82042965</a>🌙
</div>
<div>
Copyright © 2021 Nebulosa Cat. All rights reserved.
</div>到這邊就差不多結束了，可以呈現出這樣的效果 :
附錄
前面使用到的一些HTML語法 :
//在每個區塊加上<div>和</div>(區域元素)可以避免跑版
<div>
內文
</div>
//超連結崁入
<a href="網址URL">可以點的文字</a>