用原生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>


 

 

posted @ 2020-10-09 23:31  MaricoCheung  阅读(1230)  评论(0编辑  收藏  举报