简易 js 时钟
[編輯] [转简体] (简体译文)
|
作者:huidong
| 分類:【編程】HTML/JavaScript
[
10 瀏覽
0 評論
2 贊
2 踩
]
概要
正文
想在屏幕上显示大字号、居中的时间,可惜 windows 的自带时钟居然不行。
于是简单做了一个,很简易很简易的。
由于我的系统是黑色调的,所以这个时钟支持黑白双色主题。
代码:
<html> <head> <title>CLOCK</title> <script type="text/javascript"> // 当前页面主题色,0 为白色,1 为黑色 var style = 0; function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // 当数字是小于10的就要在前面加0.看起来规范 m=checkTime(m) s=checkTime(s) document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',1000) } function checkTime(i) { if (i<10) {i="0" + i} return i } // 切换主题 function changeStyle() { if(style) { document.body.style = "background-color:white;color:black"; style = 0; } else { document.body.style = "background-color:black;color:white"; style = 1; } } </script> </head> <body onload="startTime()"> <div style="height:30%"></div> <div id="txt" style="text-align:center;font-size:150"></div> <button onclick="changeStyle()">Change style</button> </body> </html>
效果如何,运行便知。
显示时间直接用的 w3c 的例子:https://www.w3cschool.cn/xqw2e7/s5fk19wz.html