前言
显示当前时间对于一些后台类的项目使用比较频繁，本文将此功能封装起来以便复用。
分别是当前时间和当前时间+星期，可以根据需求直接复制粘贴。
另外，本文还提供了两种比较酷炫的文字展示效果，分别是文字发光和文字流光效果，以提高用户体验。
我用的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;
