简易 js 时钟
[編輯] [转简体] （简体译文）
|
作者：huidong
| 分類：【編程】HTML/JavaScript
[
25 瀏覽
0 評論
8 贊
7 踩
]
概要
正文
想在屏幕上显示大字号、居中的时间，可惜 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