实现效果:
获取星期:【new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" )[date.getDay()]】
时间显示优化(补“0”):【date.getHours() < 10 ? "0" + date.getHours() : date.getHours()】
js动态添加html:【document.getElementById("week").innerHTML = this.day】
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>时间显示</title>
</head>
<body>
<div class="time-wrapper">
<div id="date"></div>
<div id="week"></div>
<div id="time"></div>
</div>
<script>
//获取当前时间年月日时分秒星期
function getNowFormatDate() {
var date = new Date()
this.year = date.getFullYear()
this.month = date.getMonth() + 1
this.date = date.getDate()
this.day = new Array(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
)[date.getDay()]
this.hour = addZero(date.getHours())
this.minute = addZero(date.getMinutes())
this.second = addZero(date.getSeconds())
document.getElementById("date").innerHTML =
this.year + "年" + this.month + "月" + this.date + "日"
document.getElementById("week").innerHTML = this.day
document.getElementById("time").innerHTML =
this.hour + ":" + this.minute + ":" + this.second
}
//时间显示优化(补“0”)
function addZero(fn) {
return fn < 10 ? "0" + fn : fn
}
// 定时器,每1s执行1次getNowFormatDate
setInterval(getNowFormatDate, 1000)
</script>
<style>
.time-wrapper {
width: 200px;
height: 150px;
border: 2px solid #0080c0;
text-align: center;
margin: 0 auto;
line-height: 30px;
color: #0080c0;
font-weight: 600;
padding-top: 40px;
border-radius: 6px;
}
</style>
</body>
</html>