分類
飛翔3.0 飛翔校園

斷網就沒大時鐘?小恐龍升級報時龍?!

高中的某次段考,我們學校校內大考有在電子白板開時鐘的慣例。沒想到,當天早上學校斷網了:)

而且我們班電腦也沒有預載的大時鐘程式…

距離考試開始不久了,情急之下,直覺的打開了Javascript Console。

事情就是這麼來的。

原理

「沒有網際網路連線」的頁面也是一頁網頁,是網頁就能執行JavaScript,JavaScript內建有Date這個物件可以呼叫,宣告物件當下會回傳當下的時間。Date也內建method可以直接轉成像上面那樣的時間文字。

Javascript Date – MDN Docs

而剛好「沒有網際網路連線」這幾個字是寫在<h1>(最高標題)裡面,字也夠大。所以我們只要把Heading每秒改成當下新宣告的Date,再轉成文字即可。

setInterval(()=>{
     document.getElementsByTagName('h1')[0].innerText = new Date().toLocaleString()
},1000)

*注意大小寫

用SetInterval包成每1000毫秒(一秒)執行一次,每次把<h1>的文字改成時間。

F12叫出dev tools把這串code丟入javascript console執行

大功告成!

某天斷網的現場

說說你有什麼想法!

使用 WordPress.com 設計專業網站
立即開始使用