vue簡單練習桌面時鐘的實現(xiàn)代碼實例

更新時間：2019年09月19日 14:09:27 作者：袁藝明

這篇文章主要介紹了vue簡單練習桌面時鐘的實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值的相關資料,需要的朋友可以參考下

用vue實現(xiàn)一個簡單的網(wǎng)頁桌面時鐘，主要包括時鐘顯示、計時、暫停、重置等幾個功能。

效果圖如下，頁面剛進來的時候是一個時鐘，時鐘上顯示的時、分、秒為當前實際時間，點擊計時器按鈕后，頁面變成一個計時器，并且計時器按鈕被暫停與重置兩個按鈕替代，分別對計時器進行暫停和重置，若點擊時鐘按鈕會切換回時鐘界面。

代碼如下：

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: