vue，js方法判断当前时间是上午，中午，下午还是晚上

最新推荐文章于 2024-05-23 17:22:01 发布

原创最新推荐文章于 2024-05-23 17:22:01 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

文章介绍了如何在Vue应用中使用JavaScript方法，根据当前时间判断并显示上午、中午、下午或晚上的问候语，结合用户自定义名称。

使用场景

vue，js方法判断当前时间是上午，中午，下午还是晚上
在这里插入图片描述

模板中调用

<div class="content">
   <div class="content-title">
       {{ getTimeState() }}
   </div>
   <div>{{times}}</div>
</div>

具体逻辑代码：

    getTimeState() {
      var user= '神秘剑客漫步云端'
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let state = ``;
      // 判断当前时间段
      if (hours >= 0 && hours <= 11) {
        state = `上午好，${user}，今天又是元气满满的一天！`;
      } else if (hours > 11 && hours <= 13) {
        state = `中午好，${user}，记得吃午饭哦~`;
      } else if (hours > 13 && hours <= 18) {
        state = `下午好，${user}，合理工作，注意休息哦~`;
      } else if (hours > 18 && hours <= 24) {
        state = `上午好，${user}，早点休息哦~`;
      }
      return state;
    }