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)文章
使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)
今天小編就為大家分享一篇使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10 
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式，幫助大家更好的理解和學習vue路由，感興趣的朋友可以了解下
2020-10-10 
這篇文章主要介紹了vue-cli 項目打包完成后運行文件路徑報錯問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-07-07 
這篇文章主要介紹了Vue使用高德地圖選點定位搜索定位功能,文中給大家提到了常見問題解決方法，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10 
Vue3公布曾經(jīng)有一段時間了,它采納了新的響應(yīng)式零碎,而且構(gòu)建了一套全新的 Composition API,下面這篇文章主要給大家介紹了關(guān)于Vue3新狀態(tài)管理工具的相關(guān)資料,需要的朋友可以參考下
2022-03-03 
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09 
第一次寫Vue項目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細節(jié)
2022-12-12 
vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能實例
最近做項目有用到某個div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12 
今天小編就為大家分享一篇vue 解決文本框被鍵盤遮住的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11