这是一个简单的小功能,直接上代码,样式可以自己选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#timeClock{
margin:50px auto;
text-align: center;
font-size: 30px;
width: 500px;
height: 100px;
line-height: 100px;
color:#f40;
background-color:#000;
}
</style>
</head>
<body>
<div id="timeClock"></div>
</body>
<script>
var nowTime= function nowTime(){
//获取当前时间，算出小时，分钟，秒。
var dateTime = new Date();
var hour = dateTime.getHours();
var min = dateTime.getMinutes();
var sec = dateTime.getSeconds();
//调用函数 补0
checkTime(min);
checkTime(sec);
document.getElementById('timeClock').innerHTML = checkTime(hour) + '时' + checkTime(min) + '分' + checkTime(sec) + '秒';
}
//定义一个定时器
setInterval(nowTime,1000);
//给小时，分钟，秒，不足10的数前面补一个0.
function checkTime(num){
if(num < 10){
return '0' + num;
}
else if(num >= 10){
return '' + num;
}
}
nowTime();
</script>
</html>
效果如下:
