方法一
步骤构思
- 需要用到日期内置对象，
- 获取系统小时，
- 利用多分支语句来判断
- 修改元素内容的相应显示问候语。
<div style="color:deeppink;font-weight: 600;"></div>
<script>
// 1.获取元素
var div = document.querySelector('div');
// 2. 得到当前的小时数
var nowTime = new Date();
var h = nowTime.getHours();
// 3. 判断小时数,改变文字信息
if (h <= 4) {
div.innerHTML = "夜已深，Mydear注意休息哦！"
} else if (h <= 7) {
div.innerHTML = "亲爱的EmilyChen，早安呀！"
} else if (h <= 12) {
div.innerHTML = "早起的虫子有鸟吃，开启美好的一天叭！"
} else if (h <= 13) {
div.innerHTML = "诶嘿嘿，是时候午休咯！"
} else if (h <= 18) {
div.innerHTML = "亲爱的EmilyChen，午安呐！"
} else if (h <= 21) {
div.innerHTML = "亲爱的EmilyChen，晚安哟！"
} else {
div.innerHTML = "晚安全世界，晚安EmilyChen！"
}
</script>方法二
<html>
<head>
<title>JS时间提示语</title>
<body>
<script language="JavaScript">
document.write("<center><font color=#990099 size=-1> ")
day = new Date()
hr = day.getHours()
minu = day.getMinutes()
s = "您好，现在是：";
s = s + hr + "点" + minu + "分。 ";
if (hr == 1)
document.write(s + "凌晨1点了！该休息了！")
if (hr == 2)
document.write(s + "工作狂，还在忙吗？")
if (hr == 3)
document.write(s + "午夜3点！你决定不睡觉了吗？？")
if (hr == 4)
document.write(s + "凌晨4点了，您的工作精神一定要上报党中央！")
if (hr == 5)
document.write(s + "5点多了，您是刚起床还是还没睡啊？")
if (hr == 6)
document.write(s + "早上好！新一天又开始啦！有什么打算呢？")
if (hr == 7)
document.write(s + "吃早饭了吗？")
if ((hr == 8) || (hr == 9) || (hr == 10))
document.write(s + "祝您工作愉快！")
if (hr == 11)
document.write(s + "快中午啦，准备下班吗？")
if (hr == 12)
document.write(s + "中午好！你吃饭了吗？")
if ((hr == 13) || (hr == 14))
document.write(s + "下午好，准备准备要上班了！")
if ((hr == 15) || (hr == 16) || (hr == 17))
document.write(s + "下午好！")
if ((hr == 18) || (hr == 19))
document.write(s + "该看新闻联播了！")
if ((hr == 20) || (hr == 21) || (hr == 22))
document.write(s + "休息下，找个电影看看睡觉吧？")
if (hr == 23)
document.write(s + "不早了，快休息吧？")
if (hr == 0)
document.write(s + "午夜时分，你可要注意身体呢！")
document.write("</font></center>")
</script>
</body>
</html>