【组件封装】显示实时时间和星期几·附文字特效

2023-01-15 185

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【组件封装】显示实时时间和星期几·附文字特效

前言

显示当前时间对于一些后台类的项目使用比较频繁，本文将此功能封装起来以便复用。

分别是当前时间和当前时间+星期，可以根据需求直接复制粘贴。

另外，本文还提供了两种比较酷炫的文字展示效果，分别是文字发光和文字流光效果，以提高用户体验。

我用的vue封装的，但是对于react或其他框架同样适用，只需稍作修改即可使用。

1.显示实时时间无星期版

1.1 效果如下：

1.2 封装的代码如下（适用vue）

<span>{{ nowTime }}</span> //template
data () {
    return {
      nowTime: '',//当前时间
    }
  },
mathod:{
 //显示当前时间（年月日时分秒）
    timeFormate (timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new     Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
      let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes()
      let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds()
      this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ':' + ss
    },
    nowTimes () {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear () {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    },
},
mounted () {
    this.nowTimes()
  },

2.显示实时时间带星期几

2.1 效果图

2.2 封装的代码如下（适用vue）

<span>{{ week }}</span>
data () {
    return {
      week: '',// 本周周几
    }
  },
methods:
  // 获取当前系统日期
    getdataTime () {
      let wk = new Date().getDay()
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[wk]
      this.date_show = yy + "年" + mm + "月" + dd + "日"
    },
mounted:
this.getdataTime ()

3.流光效果

@keyframes text-style-1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.text-style-1 {
  font-size: 30px;
  background-image: linear-gradient(to right, red , yellow, green, yellow, red);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  color: transparent;
  animation: text-style-1 2s infinite linear;
}

4.文字发光

text-shadow: 0 0 10px #01fef4, 0 0 20px #01fef4;