写个网页实现时钟效果
2020-04-13 本文已影响0人
AndyDennisRob
起因
早上看邮件时候看到自己大一交给师姐的一份作业。回想起自己学习JavaScript时的懵懂。看见自己之前写的时钟，忍不住分享一下。
这里用到了html,css,js的技术。
动手写代码
首先，我们定义一个startTime函数。id为time标签的后面会讲到。
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('time').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () { startTime() }, 500);
}
聪明的你注意到了，这里有个函数checkTime,目的是为了好看,在数字小于10的情况下在前面添个0。
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
然后一个基本的功能就实现了，接下来我们就是为了让他好看。
来个css。这里样式的规定不唯一，大家大小和位置看情况。
body{
/* background-color: blanchedalmond; */
/* color: blueviolet; */
background-color: black;
color: greenyellow;
font-size: 200px;
text-align: center;
margin: 300px;
}
background-color 和 color分别是背景颜色和字体颜色，可以直接像我一样给个中文，也可以六个十六进制数字，也可以用RGB.这些是CSS的知识我就不赘述了。
最后在body标签里添加一个div标签。
<body onload="startTime()">
<div id="time"></div>
</body>
这里在body这还绑定了一个监听事件，当页面加载好时触发我们前面写的startTime()函数。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
/* background-color: blanchedalmond; */
/* color: blueviolet; */
background-color: black;
color: greenyellow;
font-size: 200px;
text-align: center;
margin: 300px;
}
</style>
</head>
<script>
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('time').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () { startTime() }, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
<body onload="startTime()">
<div id="time"></div>
</body>
</html>
纯小白只需要新建一个.txt文件，然后用记事本或其他编辑器把上面完整代码复制粘贴到txt里面，保存。然后将.txt文件后缀改为.html即可。最后用浏览器打开，按F11即可看到效果。
结果
大家用浏览器打开刚刚保存的.html文件，按F11全屏后即可。
运行结果
看看其他配色.
background-color:bisque;
color: blueviolet;
黄底配色
background-color:black;
color: #ecf0f1;
白字配色
结束语
其他颜色大家可以去flatUI的网站看看哦，希望本文对您有帮助。感谢阅读。
