溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue如何實現(xiàn)桌面時鐘”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何實現(xiàn)桌面時鐘”這篇文章吧。
用vue實現(xiàn)一個簡單的網(wǎng)頁桌面時鐘，主要包括時鐘顯示、計時、暫停、重置等幾個功能。
效果圖如下，頁面剛進(jìn)來的時候是一個時鐘，時鐘上顯示的時、分、秒為當(dāng)前實際時間，點擊計時器按鈕后，頁面變成一個計時器，并且計時器按鈕被暫停與重置兩個按鈕替代，分別對計時器進(jìn)行暫停和重置，若點擊時鐘按鈕會切換回時鐘界面。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>時鐘</title>
<style type="text/css">
.clock {
width: 400px;
height: 180px;
line-height: 180px;
border: 10px solid #aaa;
border-radius: 10px;
margin: 120px auto;
background: pink;
text-align: center;
position: relative;
box-shadow: 0px 5px 20px rgba(0,0,0,.6);
}
.clock .text {
font-size: 70px;
font-weight: bold;
color: rgba(0,0,0,.7);
}
.clock .btn {
position: absolute;
/*top: -66px;*/
bottom: -66px;
border: none;
outline: none;
width: 80px;
height: 36px;
border-radius: 4px;
font-size: 16px;
background: #aaa;
cursor: pointer;
box-shadow: 0px 5px 20px rgba(0,0,0,.6);
}
.clock .btn:hover {
opacity: 0.8;
}
.clock .btn-clock {
left: 110px;
}
.clock .btn-clock.to-left {
left: 60px;
}
.clock .btn-timer {
right: 110px;
}
.clock .btn-suspend {
right: 160px;
}
.clock .btn-reset {
right: 60px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="clock">
<span class="text" v-if="index == 0">
{{ hour }}:{{ min }}:{{ sec }}
</span>
<span class="text" v-else>
{{ min }}:{{ sec }}:{{ msec }}
</span>
<button class="btn btn-clock" @click="selectClock" :class="{'to-left': index != 0}">時鐘</button>
<button class="btn btn-timer" @click="selectTimer" v-if="index == 0">
<span>計時器</span>
</button>
<button class="btn btn-suspend" @click="suspendTimer" v-if="index > 0">
<span v-if="index == 1">暫停</span>
<span v-if="index == 2">開始</span>
</button>
<button class="btn btn-reset" @click="resetTimer" v-if="index == 1 || index == 2">
<span>重置</span>
</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
index: 0, // 0表示時鐘頁面，1表示計時器計時狀態(tài)，2表示計時器暫停狀態(tài)
hour: '00', // 頁面顯示的數(shù)值
min: '00',
sec: '00',
msec: '00',
h: 0, // 臨時保存的數(shù)值
m: 0,
s: 0,
ms: 0,
timer: null,
date: null
},
// 監(jiān)視器
watch: {
index(newValue, oldValue) {
clearInterval(this.timer);
this.timer = null;
this.date = null;
// 從時鐘頁面click過來 或 從計時器頁面click過來
if (oldValue == 0 || newValue == 0) { // index等于2時數(shù)據(jù)保留
this.hour = '00';
this.min = '00';
this.sec = '00';
this.msec = '00';
this.h = 0;
this.m = 0;
this.s = 0;
this.ms = 0;
}
this.autoMove();
}
},
methods: {
// 自動計時
autoMove() {
if (this.index == 0) {
this.timer = setInterval(res => {
this.date = new Date();
this.h = this.date.getHours();
this.m = this.date.getMinutes();
this.s = this.date.getSeconds();
this.hour = this.h > 9 ? this.h : '0' + this.h;
this.min = this.m > 9 ? this.m : '0' + this.m;
this.sec = this.s > 9 ? this.s : '0' + this.s;
}, 1000);
} else if (this.index == 1){
this.timer = setInterval(res => {
this.ms ++;
if (this.ms == 100) {
this.s ++;
this.ms = 0;
}
if (this.s == 60) {
this.m ++;
this.s = 0;
}
this.msec = this.ms > 9 ? this.ms : '0' + this.ms;
this.min = this.m > 9 ? this.m : '0' + this.m;
this.sec = this.s > 9 ? this.s : '0' + this.s;
}, 10);
}
},
// 選擇時鐘
selectClock() {
this.index = 0;
},
// 選擇計時器
selectTimer() {
this.index = 1;
},
// 開始、暫停計時器
suspendTimer() {
if (this.index == 1) {
this.index = 2;
} else if (this.index == 2) {
this.index = 1;
}
},
// 重置計時器
resetTimer() {
this.index = 0;
setTimeout(res => {
this.index = 1;
}, 1);
}
},
mounted() {
this.autoMove();
}
})
</script>
</body>
</html>以上是“vue如何實現(xiàn)桌面時鐘”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼