vue 根据系统的时间显示问候语功能

maoge_666

已于 2024-04-18 14:18:31 修改

阅读量382

点赞数 2

文章标签：前端 vue javascript

于 2024-04-18 14:17:52 首次发布

本文链接：https://blog.csdn.net/maoge_666/article/details/137919909

版权

这篇文章展示了如何使用JavaScript在模板中根据当前时间显示个性化的问候语，如早上好、上午好等。

摘要由CSDN通过智能技术生成

template

<template>
    <div>
      {{getTimeState()}},欢迎你,admin
    </div>
</template>

<script>
getTimeState() {
   // 获取当前时间
    let timeNow = new Date();
    // 获取当前小时
    let hours = timeNow.getHours();
    // 设置默认文字
    let state = ``;
    // 判断当前时间段
    if (hours >= 0 && hours <= 10) {
      state = `🌞 早上好!`;
    } else if (hours > 10 && hours <= 11) {
      state = `🌞 上午好!`;
    } else if (hours > 11 && hours <= 13) {
      state = `🌼 中午好!`;
    } else if (hours > 13 && hours <= 18) {
      state = `🌼 下午好!`;
    } else if (hours > 18 && hours <= 24) {
      state = `😴 晚上好!`;
    }
    return state;
}
</script>