顯示當前時間——javascript
阿新 • • 發佈:2018-12-10
網頁上顯示日期時間,就只需要建立一個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>