透過 HTML Script 在頁尾顯示本站運行時間

我網站創建多久了?

每個架設網站的人多少都有想這個問題,畢竟時間流逝的很快,總需要一個提醒來告訴自己,因此我剛架設這個網站好沒兩天就把這個功能給生出來了

由於本站使用的是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>

暫無評論

發怖評論 編輯評論


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇