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

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

前言


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

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

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

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

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


1.1 效果如下:


image.png

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 效果图


image.png

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.流光效果


image.png

@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.文字发光


image.png

text-shadow: 0 0 10px #01fef4, 0 0 20px #01fef4;
目录
打赏
0
0
0
0
25
分享
相关文章
SQL vs. NoSQL:如何根据大数据需求选择合适数据库
【4月更文挑战第8天】本文对比分析了SQL与NoSQL数据库在大数据项目中的应用。SQL数据库适合结构化数据、强一致性和复杂事务处理,如金融系统,而NoSQL则适用于半结构化和非结构化数据、高并发及大数据场景,如社交网络。选择时应考虑业务需求、技术栈、团队经验和成本效益,以找到最佳解决方案。随着技术发展,NewSQL和Multi-model数据库也提供了更多选择。
681 0
彻底搞懂同步与异步,阻塞/非阻塞
彻底搞懂同步与异步,阻塞/非阻塞
2523 0
开发者必看:MySQL主从复制与Laravel读写分离的完美搭配
开发者必看:MySQL主从复制与Laravel读写分离的完美搭配
154 2
【Java集合类面试十三】、HashMap如何实现线程安全?
实现HashMap线程安全的方法包括使用Hashtable类、ConcurrentHashMap,或通过Collections工具类将HashMap包装成线程安全的Map。
常见浏览器User-Agent大全
下面是工作中需要用到的常见浏览器User-Agent字符串的收集整理,不断更新中。 OperaMozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.
11865 2
基于pjsip实现p2p语音对讲
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/voidreturn/article/details/65634390 目的 为实现跨网络的语音对讲,使位于NAT后的两个设备进行p2p的语音通讯,此处选用pjsip开源项目来实现。
3800 0
《阿里云云通信短信服务安全白皮书》——安全责任共担—— 一、 阿里云云通信安全责任
《阿里云云通信短信服务安全白皮书》——安全责任共担—— 一、 阿里云云通信安全责任
319 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问