实现按钮控制时间展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面动态显示时间</title>
</head>
<body>
<div>
<p class="p1"></p>
<button class="btn">停止时间</button>
</div>
<script>
//格式:2020年04月12日 10:20:00 星期二
var p1 = document.querySelector(".p1")
var btn = document.querySelector(".btn")
var timerId = setInterval(format, 1000)
var flag = true
function format() {
var newDate = new Date()
var day = newDate.getDay()
var y = newDate.getFullYear()
var m = (newDate.getMonth() + 1) < 10 ? "0" + (newDate.getMonth() + 1) : (newDate.getMonth() + 1)
var d = newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate()
var h = newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours()
var min = newDate.getMinutes() < 10 ? "0" + newDate.getMinutes() : newDate.getMinutes()
var s = newDate.getSeconds() < 10 ? "0" + newDate.getSeconds() : newDate.getSeconds()
var dict = {
1: "一",
2: "二",
3: "三",
4: "四",
5: "五",
6: "六",
0: "天",
}
//var week=["日","一","二","三","四","五","六"]
var matDate = y + "年" + m + "月" + d + "日" + h + ":" + min + ":" + s + " 星期" + dict[day]
p1.textContent = matDate
}
btn.onclick = function () {
if (flag) {
//停止时间
clearInterval(timerId)
btn.textContent = "开始时间"
timerId = null
flag = false
} else {
btn.textContent = "停止时间"
timerId = setInterval(format, 1000)
flag = true
}
}
</script>
</body>
</html>
效果展示: