用原生JS写根据时间显示问候语

步骤构思

1)需要用到日期内置对象,
2)获取系统小时,
3)利用多分支语句来判断,
4)修改元素内容的相应显示问候语。

<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>
(0)

相关推荐

  • 用原生JS写微程序

    (1)简易ATM /* 步骤构思:1.向用户打印目录 2.变量储存100块剩钱 3.变量储存=存钱:输入钱数加先前存钱数, 弹出显示余额提示框 4.变量储存=取钱:现有减去取钱数,弹出显示余额提示框 ...

  • 用原生JS写冒泡排序及动画演示

    法一(自定义函数) 请点击:冒泡排序动画演示(遍历多少行.每行交换多少次) /*步骤构思: 1.声明命名函数(形参数组) 2.for设置外循环, 控制遍历多少趟 3.for设置内循环, 控制遍历交换多 ...

  • 案例:根据系统时间显示不同的问候语

    上午下午晚上分别显示不同的问候语 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  • 问与答125:如何将小数转换为时间显示?

    excelperfect Q:在单元格中有一个数字11.5,如何将其在另一个单元格中显示为11分30秒?如下图1所示. 图1 A:可以通过数值转换并设置自定义格式实现. 在单元格D2中,输入公式: = ...

  • [js] 第113天 用js写一个事件侦听器的方法

    今日试题: 用js写一个事件侦听器的方法 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3 ...

  • [js] 第94天 用js写出死循环的方法有哪些?

    今日试题: 用js写出死循环的方法有哪些? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日 ...

  • 用原生JS代码实现的一个图文并茂的随机点名小应用

    用原生JS代码实现的一个图文并茂的随机点名小应用

  • 【诗艺国际】梦里太空 | 写给时间一首歌(外二首)

    ▼  写给时间一首歌(外二首) 作者/梦里太空 [作家/诗人风采] [作家/诗人简介] ★ 魏双成,男,汉族,笔名:梦里太空,系甘肃省陇南市西和县稍峪乡邵山村魏沟人.诗歌,曾刊,天天快报.今日头条.百 ...

  • 周朝阳:再写珍惜时间

    人生短短几十年,平均寿命也就七八十岁,那些长寿的不过百岁,不管能不能活到这个岁数,我觉得60岁之后自己能够照顾自己的,特别是还能够去做一些自己喜欢的事情,已经难能可贵了. 60岁以上都有这样或那样的疾 ...