目录
思路：
1.首先需要获取当前时间：使用 时间对象date = new Date()；
2.在获取年份
3 获取月份
4. 获取几号
5. 星期几
6 小时
7 分
8 秒
9 给条件判断上午还是下午
10 输出
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#wrapper {
width: 500px;
height: 100px;
margin: 0 auto;
background-color: aqua;
border: 5px solid red;
text-align: center;
line-height: 100px;
font-weight: 800;
font-size: 20px;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<script>
var _wrapper = document.getElementById("wrapper");
var id = setInterval(function() {
var date = new Date(); //当前时间
var years = date.getFullYear(); //年
var month = date.getMonth(); //月
var day = date.getDate(); //日
var week = date.getDay(); //星期
var h = date.getHours(); //小时
var f = date.getMinutes(); //分钟
var s = date.getSeconds(); //秒
if (s < 10) {
s = "0" + s;
}
if (f < 10) {
f = "0" + f;
}
if (h < 10) {
h = "0" + h;
}
_wrapper.innerHTML = `今天是${years}年 ${month+1}月 ${day}日 星期${week} ${h}:${f}:${s}`;
if (h > 12) {
_wrapper.innerHTML =
`今天是${years}年 ${month+1}月 ${day}日 星期${week} ${h}:${f}:${s} pm`;
} else {
_wrapper.innerHTML =
`今天是${years}年 ${month+1}月 ${day}日 星期${week} ${h}:${f}:${s} am`;
}
}, 1000)
</script>
</body>
</html>效果：
解析：
前两个if是判断秒（分/小时）小于10的时候 拼接一个0 出来效果就是01 02 ...而不会出现 0 1 2 后边两个if是判断当大于12小时的时候是下午，反之上午。
首先需要获取wrapper框
var _wrapper = document.getElementById("wrapper");
其次用计时器
var id = setInterval(function() {}
然后在写函数获取时间
最后就是输出了
_wrapper.innerHTML =.........