这个功能在网站上很普遍,比如说,在早上提示早上好,到了晚上就提示该休息了,主要方法还是运用Date
对象来实现。
就直接上代码了,定时显示不同内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
background-color: #bfc;
}
</style>
</head>
<body>
<p></p>
<script>
var p = document.querySelector('p');
var date = new Date();
var time = date.getHours();
if (time < 5) {
p.innerHTML = '别工作到太晚';
} else if (time < 12) {
p.innerHTML = '早上好,请努力工作';
} else if (time < 17) {
p.innerHTML = '下午好,别犯困了';
} else {
p.innerHTML = '晚上到了,好好休息吧';
}
</script>
</body>
</html>
或者区间时间显示
<script>
var p = document.querySelector('p');
var date = new Date();
var time = date.getHours();
if(time>=8 && time<=17){
p.innerHTML = '工作时间';
} else {
p.innerHTML = '下班时间';
}
</script>