快捷導(dǎo)航

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

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

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

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

效果圖如下，頁面剛進(jìn)來的時(shí)候是一個(gè)時(shí)鐘，時(shí)鐘上顯示的時(shí)、分、秒為當(dāng)前實(shí)際時(shí)間，點(diǎn)擊計(jì)時(shí)器按鈕后，頁面變成一個(gè)計(jì)時(shí)器，并且計(jì)時(shí)器按鈕被暫停與重置兩個(gè)按鈕替代，分別對(duì)計(jì)時(shí)器進(jìn)行暫停和重置，若點(diǎn)擊時(shí)鐘按鈕會(huì)切換回時(shí)鐘界面。

代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>時(shí)鐘</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}">時(shí)鐘</button>
      <button class="btn btn-timer" @click="selectTimer" v-if="index == 0">
        <span>計(jì)時(shí)器</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表示時(shí)鐘頁面，1表示計(jì)時(shí)器計(jì)時(shí)狀態(tài)，2表示計(jì)時(shí)器暫停狀態(tài)
        hour: '00', // 頁面顯示的數(shù)值
        min: '00',
        sec: '00',
        msec: '00',
        h: 0,    // 臨時(shí)保存的數(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;
          // 從時(shí)鐘頁面click過來 或 從計(jì)時(shí)器頁面click過來
          if (oldValue == 0 || newValue == 0) {  // index等于2時(shí)數(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: {
        // 自動(dòng)計(jì)時(shí)
        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);
          }
        },
        // 選擇時(shí)鐘
        selectClock() {
          this.index = 0;
        },
        // 選擇計(jì)時(shí)器
        selectTimer() {
          this.index = 1;
        },
        // 開始、暫停計(jì)時(shí)器
        suspendTimer() {
          if (this.index == 1) {
            this.index = 2;
          } else if (this.index == 2) {
            this.index = 1;
          }
        },
        // 重置計(jì)時(shí)器
        resetTimer() {
          this.index = 0;
          setTimeout(res => {
            this.index = 1;
          }, 1);
        }
      },
      mounted() {
        this.autoMove();
      }
    })
  </script>
</body>
</html>

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

您可能感興趣的文章: