网页上显示日期时间,就只需要创建一个Date对象,我们就可以完成时间的实现,但这个时间却是固定的。那是因为当页面加载完数据之后,这个时间就是固定的了,所以我们要每秒显示一次时间,这样时间就能实时更新了。
核心代码
//设置定时器
setInterval(function() {
document.getElementById("nowTime").innerHTML = getNowTime()
}, 1000)
是不是很简单,这就是一个定时器,通过每过一秒显示一次时间,这样就可以更新时间了
完整代码
<!DOCTYPE html>
<html>
<head>
<title>显示当前时间</title>
</head>
<script type="text/javascript">
window.onload = () => {
//设置星期数
const getWeekDay = (week) => {
weekday = null
if(week == "1") {
weekday == "星期一"
}
else if (week == "2") {
weekday = "星期二"
}
else if (week == "3") {
weekday = "星期三"
}else if (week == "4") {
weekday == "星期四"
}else if (week == "5") {
weekday = "星期五"
}else if (week == "6") {
weekday = "星期六"
}else if(week == "7") {
weekday = "星期日"
}
return weekday
}
const getNowTime = () => {
//获取当前时间
var date = new Date()
//设置日期格式
var nowtime = date.getFullYear() + "年"
+ (date.getMonth() + 1) + "月"
+ date.getDate() + "日"
+ "<br/>"
+ getWeekDay(date.getDay())
+ "<br/>"
+ date.getHours() + ":"
+ date.getMinutes() + ":"
+ date.getSeconds()
return nowtime
}
//设置定时器,每过一秒显示当前时间
setInterval(function() {
document.getElementById("nowTime").innerHTML = getNowTime()
}, 1000)
}
</script>
<body>
<h2>显示当前时间</h2>
<p id="nowTime"></p>
</body>
</html>