利用setInterval()函数实现动态时钟
setInterval(function() {
}, 1000)//1000毫秒,一秒刷新一次
先声明一个时间对象date()获取系统当前时间
var date = new Date();
再定义时、分、秒来接收系统当前时、分、秒
var hours = date.getHours();//获取当前小时数(0-23)
var minutes = date.getMinutes();//获取当前分钟数(0-59)
var seconds = date.getSeconds();//获取当前秒数(0-59)
为了美观时钟使用三目运算符将个位数时分秒都变成多位数
hours = hours > 9 ? hours : "0" + hours;//如果小时数小于9则在数字前面加0使其变成09
minutes = minutes > 9 ? minutes : "0" + minutes;
seconds = seconds > 9 ? seconds : "0" + seconds;
使用span标签来显示时间
<span id="time"></span>
获取span标签id,使用innerHTML向对象插入内容
全部代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动态时钟</title>
</head>
<body>
<span id="time"></span><br />
<script>
// 在页面上实现一个显示当前时间的动态时钟
setInterval(function() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 9 ? hours : "0" + hours;
minutes = minutes > 9 ? minutes : "0" + minutes;
seconds = seconds > 9 ? seconds : "0" + seconds;
var currentTime = "现在是" + hours + "时" + minutes + "分" + seconds + "秒"
document.getElementById("time").innerHTML = currentTime;
}, 1000)
</script>
</body>
</html>
效果图