JS如何实现根据不同的时间段显示不同的欢迎语

前言

我们平时在逛一些网站的时候,有时,会看到网站有一些欢迎语,不同的时间段,用不同的欢迎语提示用户

让用户进入你的网站,感受一波温馨,心情愉悦,那要实现这个效果该怎么实现呢

其实,就是获取时间,根据不同的时间段,设置不同的欢迎语就可以了的

972413afedb3e8e1a8831a68fb9389e8.gif

01

具体示例

具体示例,可见https://coder.itclan.cn/fontend/js/34-time-huanyin/

点击左下角阅读原文即可查看

31adaaf9ef98871ce5be89c1ec83d8ba.gif

02

原生js

用原生js实现,先通过new Date()获取当前时间,然后听过getHours()得到小时,通过小时,进行时间间隔的判断就可以了的

function weclomeTime() {
    var date = new Date(); // 获取当前时间
    var str = ""; // 用于拼接
    var hour = date.getHours(); // 得到小时
    // 判断时间间隔
     if(hour<12) {
          str = 'Hi,早上好,又是崭新的一天,打工人,要加油哦';
      }else if(hour >= 12 && hour < 13 ) { // 如果为12~13点,那么是中午
          str = 'Hi,中午好,在忙,也不要忘记眯一小会儿,不然下午会神游哦'
      }else if(hour >=13 && hour <18) { // 13点到18点为下午
          str = "Hi,下午好,打起精神,该起来搬砖干活了";
      }else if(hour >=18 && hour <22) { // 18-22点,晚上
          str = "Hi,晚上好,忙完了一天,该放下手机,电脑,好好休息下了"
      }else {
          str = "Hi,夜猫子好,熬最晚的夜,敷最贵的膜,不要熬夜哦,没了1,后面再多的零,也没有意义哈,狗命要紧";
      }
    return str;
}

var pText = document.getElementById("text");
pText.innerHTML = weclomeTime();

如下是html

<p id="text"></p>

35376880463a9375efd9de317009586a.gif

03

Vue版本实现

原生js会实现,在vue里面实现也是一样的,代码如下所示

<template>
  <div class="wrap">
      <div class="welcome-tip" :style="{color}">{{str}}</div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
          color: "#409eff",
          str: '', // 定义拼接的字符串变量
        }
    },
    mounted() {
      this.welcomeTime();
    },
    methods: {
      welcomeTime() {
        let date = new Date(); // 获取当前的时间
        let hour = date.getHours(); // 得到小时数
        if(hour<12) {
          this.str = 'Hi,早上好,又是崭新的一天,打工人,要加油哦';
          this.color = "#409eff";
        }else if(hour >= 12 && hour < 13 ) { // 如果为12~13点,那么是中午
          this.str = 'Hi,中午好,在忙,也不要忘记眯一小会儿,不然下午会神游哦'
          this.color = "#67c23a";
        }else if(hour >=13 && hour <18) { // 13点到18点为下午
          this.str = "Hi,下午好,打起精神,该起来搬砖干活了";
          this.color = "#909399";
        }else if(hour >=18 && hour <22) { // 18-22点,晚上
          this.str = "Hi,晚上好,忙完了一天,该放下手机,电脑,好好休息下了"
          this.color = "#e6a23c";
        }else {
          this.str = "Hi,夜猫子好,熬最晚的夜,敷最贵的膜,不要熬夜哦,没了1,后面再多的零,也没有意义哈,狗命要紧";
          this.color = "#f56c6c";
        }

      } 
    },
  };
</script>
<style>
  .wrap {
    text-align: center;
  }
</style>

上面是使用vue实现的,核心原理是没有变的,只不过是根据不同的时间,除了改变文本内容,还修改了下样式

1c9d3dfdc97badf2fad5c729c6c814e9.gif

04

总结

实现这个效果主要是利用new Date()获取当前时间,而使用new Date()下面的getHour()可以获取小时,也可以获取分钟,秒,月的

其次就是知道时间段

Js如何实现一个累加上漂浮动画

2023-01-02

6e767effd3bb2c35c013b4b32eb9d26f.jpeg

vueJs中的watch与watchEffect函数

2023-01-02

1f2c397ff5ca05705a0def784e6aba4a.jpeg

如何解决chrome浏览器显示您要访问的是诈骗网站解决办法

2023-01-02

1e5d8abefe0ac6a3ee126c7806e36ece.jpeg

VueJs中的reactive函数

2022-12-31

e3995e3998f4722bbc1bfc69ab5e2345.jpeg
点击左下角查看更多

193f3be08d3e972a6af00d07e73a4770.gif

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值