vue實現(xiàn)電子時鐘效果
更新時間：2022年08月30日 10:09:42 作者：朝陽39
這篇文章主要為大家詳細介紹了vue實現(xiàn)電子時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)電子時鐘的具體代碼，供大家參考，具體內(nèi)容如下
html
<div class="dateBox">
? ? ? <div class="time">{{ time }}</div>
? ? ? <div class="date">{{ date }}</div>
</div>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來監(jiān)聽定時器，在beforeDestroy鉤子可以被清除。
? ? this.$once("hook:beforeDestroy", () => {
? ? ? clearInterval(clock);
? ? });
? },// 日期時間格式化——獲取當前日期時間，格式化為 2021/08/30 和 15:35:06
function 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,
? };
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Sentry?是一款功能強大的開源錯誤監(jiān)控服務(wù),廣泛用于追蹤和修復應(yīng)用中的異常情況,本文將詳細介紹如何在?Vue?應(yīng)用中集成和使用?Sentry,感興趣的可以了解下2024-11-11
Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪０逡苿拥紻OM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下2023-04-04
微信小程序?qū)崙?zhàn)基于vue2實現(xiàn)瀑布流的代碼實例
瀑布流，又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部，這篇文章主要介紹了微信小程序?qū)崙?zhàn)，基于vue2實現(xiàn)瀑布流,需要的朋友可以參考下2022-12-12
Vue中import與@import的區(qū)別及使用場景說明
這篇文章主要介紹了Vue中import與@import的區(qū)別及使用場景說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。這篇文章主要介紹了Vue.js用法詳解,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了在vue中使用echarts實現(xiàn)上浮與下鉆效果,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
vue-router清除url地址欄路由參數(shù)的操作代碼
這篇文章主要介紹了vue-router清除url地址欄路由參數(shù),本文給大家介紹的非常詳細,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了Vue3如何結(jié)合Vant實現(xiàn)簡單的登錄功能,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-04-04
vue項目無論是用element中的Select選擇器,還是使用公司維護的組件,都可以輕松實現(xiàn)單選和多選的需求,這篇文章主要給大家介紹了關(guān)于Vant彈出列表多選輸入框下拉選擇的相關(guān)資料,需要的朋友可以參考下2024-01-01