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

Bertha 。 2023-09-27 12:34 154阅读 0赞

**目录**

前言

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

1.1 效果如下：

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

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

2.1 效果图

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

3.流光效果

4.文字发光

--------------------

## 前言 ##

> 显示当前时间对于一些后台类的项目使用比较频繁，本文将此功能封装起来以便复用。
> 
> 分别是当前时间和当前时间+星期，可以根据需求直接复制粘贴。
> 
> 另外，本文还提供了两种比较酷炫的文字展示效果，分别是文字发光和文字流光效果，以提高用户体验。
> 
> 我用的vue封装的，但是对于react或其他框架同样适用，只需稍作修改即可使用。

--------------------

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

--------------------

#### 1.1 效果如下： ####

![ca831565fa3142f9a934e438ae810745.gif][]

--------------------

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

![415e8af990bb407c894ea0675415d575.gif][]

--------------------

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

![607f63cac93d41ffb67eff21a052fddf.gif][]

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

## ![3273c53d624148cf8e8e04a4d681f50a.png][] ##

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

[ca831565fa3142f9a934e438ae810745.gif]: https://img-blog.csdnimg.cn/ca831565fa3142f9a934e438ae810745.gif
[415e8af990bb407c894ea0675415d575.gif]: https://img-blog.csdnimg.cn/415e8af990bb407c894ea0675415d575.gif
[607f63cac93d41ffb67eff21a052fddf.gif]: https://img-blog.csdnimg.cn/607f63cac93d41ffb67eff21a052fddf.gif
[3273c53d624148cf8e8e04a4d681f50a.png]: https://img-blog.csdnimg.cn/3273c53d624148cf8e8e04a4d681f50a.png