题目：在屏幕上输出当前时间及问候语，具体要求如下：

屏幕上显示时间，格式是 现在时间是 小时:分钟，如 现在时间是 12:43
早上8点之前，显示 早上好
8点到12点，显示上午好
12点到14点，显示中午好
14点到18点，显示下午好
18点以后，显示晚上好

这个题目比较简单，直接实现如下：

基础HTML代码如下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>不同时间段显示不同的问候语</title>
       <script src="https://blog.fqidc.cn/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>

JavaScript代码如下：

<script>
   var day, hour, minute;
  // js中的日期类
  day = new Date();
  //获取小时
  hour = day.getHours();
  //获取分钟
  minute = day.getMinutes();
  // 如果小时小于10，前面加0，比如9显示成09
  if (hour < 10) {
    hour = '0' + hour;
  }
  // 如果分钟小于10，前面加0，比如9显示成09
  if (minute < 10) {
    minute = '0' + minute;
  }
  // 拼接字符串
  var str = '现在时间是 ' + hour + ':' + minute + ', ';
  // 问候语
  var greeting = '';
  // 8点前，早上好
  if (hour < 8) {
    greeting += '早上好';
  }
  // 8点到12点，上午好
  else if(hour < 12) {
    greeting += '上午好';
  }
  // 12点到14点，中午好
  else if(hour < 14) {
    greeting += '中午好';
  }
  // 14点到18点，下午好
  else if(hour < 18) {
    greeting += '下午好';
  }
  // 18点以后，晚上好
  else {
    greeting += '晚上好';
  }
  // 字符串拼接
  str += greeting;
  // 设置值
  $('#app').text(str)
</script>

实现效果如下：
op.png