最近 Jason 工作上需要用到網上時鐘,但很多網上時鐘都有廣告或者格式不太合用。作為一個「作 code 家」當然就要立即動手作 code 啦!既然已經作了出來就不要浪費,大家可自行抄到自己的網頁伺服器使用,沒有私家伺服器的話也可直接用 jasonworkshop.com 的。
Recently, Jason needed to use an online clock for work, but many of the online clocks had ads or were not suitable in format. Let’s start coding! You can copy it to your own web server or use it directly on jasonworkshop.com if you don’t have a web server.
這是有時分秒的版本
This version shows hours, minutes and seconds:
https://jasonworkshop.com/clock/clock1.html
▼

這是只有時分的版本
This version only shows hours and minutes:
https://jasonworkshop.com/clock/clock2.html
▼

以下是 clock1.html 的 source code, 大家可以改成適合自己使用的格式哦!
Here is the source code for clock1.html. You can modify it to fit your own format!
▼
<!DOCTYPE html>
<html>
<body onload="startTime()" style="background-color: #FFFFFF;">
<div id="txt" align=center style="font-family: Arial, Helvetica; font-size: 25vw;"></div>
<script>
function startTime() {
const today = new Date();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>