這篇文章主要為大家展示了“vue如何實現(xiàn)桌面時鐘”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue如何實現(xiàn)桌面時鐘”這篇文章吧。
成都創(chuàng)新互聯(lián)公司主要從事做網站、成都做網站、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務織金,十余年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220
用vue實現(xiàn)一個簡單的網頁桌面時鐘，主要包括時鐘顯示、計時、暫停、重置等幾個功能。
效果圖如下，頁面剛進來的時候是一個時鐘，時鐘上顯示的時、分、秒為當前實際時間，點擊計時器按鈕后，頁面變成一個計時器，并且計時器按鈕被暫停與重置兩個按鈕替代，分別對計時器進行暫停和重置，若點擊時鐘按鈕會切換回時鐘界面。
代碼如下：
時鐘
.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;
}
{{ hour }}:{{ min }}:{{ sec }}
{{ min }}:{{ sec }}:{{ msec }}
時鐘
計時器
0">
暫停
開始
重置
重慶分公司
重慶分公司
