54 lines
1.3 KiB
HTML
54 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>显示时间日期</title>
|
|
<style>
|
|
#clock {
|
|
color: white;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
width: 280px;
|
|
height: 40px;
|
|
background-color: blue;
|
|
font: 16px/40px "pt mono";
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="clock"></div>
|
|
<script>
|
|
// JavaScript - 面向对象编程
|
|
// 定义类创建对象
|
|
const clockDiv = document.getElementById('clock')
|
|
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
|
|
|
function showClock() {
|
|
let now = new Date()
|
|
let year = now.getFullYear()
|
|
let mon = now.getMonth() + 1
|
|
mon = mon < 10 ? '0' + mon : '' + mon
|
|
let date = now.getDate()
|
|
date = date < 10 ? '0' + date : '' + date
|
|
let hour = now.getHours()
|
|
hour = hour < 10 ? '0' + hour : '' + hour
|
|
let min = now.getMinutes()
|
|
min = min < 10 ? '0' + min : '' + min
|
|
let sec = now.getSeconds()
|
|
sec = sec < 10 ? '0' + sec : '' + sec
|
|
let day = now.getDay()
|
|
let fullStr = `${year}年${mon}月${date}日
|
|
${hour}:${min}:${sec} 星期${weekdays[day]}`
|
|
clockDiv.textContent = fullStr
|
|
}
|
|
|
|
showClock()
|
|
setInterval(showClock, 1000)
|
|
// var timerId = setInterval(showClock, 1000)
|
|
// clearInterval(timerId)
|
|
</script>
|
|
</body>
|
|
</html>
|