vue实战——电子时钟

vue实战——电子时钟

html

css

.dateBox { background: #121747; background-image: url("~@/assets/images/时间.png"); background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: flex-end; position: absolute; top: 70px; right: 50px; width: 400px; height: 88px;}.date { font-size: 28px; color: #8ac9ff; margin-left: 15px;}.time { font-size: 48px; color: #ffffff;}

背景图片素材

js

以vue为例

data() { return { date: null, time: null, }; },

mounted() { const clock = setInterval(() => { this.date = getToday().date; this.time = getToday().time; }, 1000); // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 this.$once("hook:beforeDestroy", () => { clearInterval(clock); }); },

// 日期时间格式化——获取当前日期时间，格式化为 2021/08/30 和 15:35:06function getToday() { var datas = new Date(); var on1 = "/"; var on2 = ":"; var onY = datas.getFullYear(); //年 var onM = datas.getMonth() + 1; //月 var onD = datas.getDate(); //日 var onS = datas.getHours(); //时 var onF = datas.getMinutes(); //分 var onN = datas.getSeconds(); //秒 if (onM >= 1 && onM <= 9) { //月 onM = "0" + onM; } if (onD >= 1 && onD <= 9) { //日 onD = "0" + onD; } if (onS >= 0 && onS <= 9) { //时 onS = "0" + onS; } if (onF >= 0 && onF <= 9) { //分 onF = "0" + onF; } if (onN >= 0 && onN <= 9) { //秒 onN = "0" + onN; } return { date: onY + on1 + onM + on1 + onD, time: onS + on2 + onF + on2 + onN, };}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。