前言

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

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

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

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

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

1.1 效果如下：

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

<span>{{ nowTime }}</span> //templatedata () {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() + 1let 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() + 1let 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;

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

winform中显示实时时间和星期
做winform项目发现需要添加一个时间显示功能,现记录如下: 1.首先新建一个Timer,命名为timer,并在属性中修改Interval为1000: 2.在需要显示时间的地方添加一个label(假 ...
C# CRC16 在textbox中显示实时时间
PC环境win10,编译器visual studio2015 CRC16的源码 static int crc16(byte[] data, int size) {int crc = 0x0;byte ...
stm32数码管显示实时时间并有闹钟功能
stm32数码管显示实时时间并有闹钟功能功能描述数码管介绍数码管芯片段选与位选驱动数码管显示代码实验思路完整代码 Led.h Led.c Key.h Key.c beep.h beep. ...
微信开发者工具中显示实时时间
在wxml中设置显示时间的标签 <text>{{nowDate}}</text> <text>{{nowTime}}</text> 在js中data中设 ...
vs2008C#网页实现显示实时时间
第一次接触这个东西,什么都不懂,好在看过几天的html5,对一些通用标签还是了解一点的. 在实现功能之前,查阅了很多代码,结果发现根本跑不起来,由于不懂C#这东西,在实现时间功能时遇到了很大的困难,在 ...
C#用timer显示实时时间
public partial class Form1 : Form{public Form1(){InitializeComponent();timer.Start();\\1s后自动调用timer_ ...
十分钟时间搞懂怎么用JS代码渲染实时时间
给大家讲一下怎么用JS初级的内容来写一个页面实时渲染时间的方法目录先给大家看一下展示一下效果吧一.在这个效果上用的Date对象的方法二.这个效果的逻辑思路是什么呢? 1.我们应该先实例化一个D ...
显示当前日期、时间和星期，且实时刷新
代码明细在底部. 源码: html部分 <template><div>{{ nowDate }} {{ nowTime } ...
实时显示当前时间（中文版）
前言:实时显示当前时间(中文版),一周的第几天用中文显示效果: <!DOCTYPE html> <html lang="zh"><head>& ...

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

前言

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

1.1 效果如下：

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

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

2.1 效果图

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

3.流光效果

4.文字发光

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

最新文章

热门文章