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

最新推荐文章于 2024-07-04 00:59:27 发布

混世大魔王ya

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量487

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/user_1102/article/details/133069231

版权

使用场景

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;
    }