Vue-cli框架实现计时器应用

技术背景

本应用使用 vue-cli 框架，并使用了自定义组件（将按钮拆分成单独的组件）和vue 模板。

使用说明

开始正计时：点击工具栏的“开始正计时”按钮即可，快捷键为"enter"键。

开始倒计时：在输入框内写入时间后，点击“开始倒计时”按钮，即可开始倒计时。

暂停计时器：点击“暂停计时器”按钮即可暂停。

清空正/倒计时：点击此按钮，计时器便会回到初始状态，等待新的计时。

重新再计时：点击此按钮，计时器便会重新开始此次计时。

恢复计时器：点击此按钮即可从暂停状态中恢复。

代码

首先初始化项目

vue init webpack <project name>

components文件夹中放入文件：counterbutton.vue

<template>
  <div>
    <button v-bind:class="styleobject" v-on:click="$emit('click-button')">{{ text }}</button>
  </div>
</template>

<script>
export default {
  name: "counterbutton",
  props: {
    text: string
  },
  data: function() {
    return {
      styleobject: {
        countup: false,
        countdown: false,
        clear: false,
        pause: false,
        restart: false,
        resume: false
      }
    };
  },
  created: function() {
    if (this.text == "开始正计时") {
      this.styleobject.countup = true;
    } else if (this.text == "开始倒计时") {
      this.styleobject.countdown = true;
    } else if (this.text == "清空倒计时" || this.text == "清空正计时") {
      this.styleobject.clear = true;
    } else if (this.text == "暂停计时器") {
      this.styleobject.pause = true;
    } else if (this.text == "重新再计时") {
      this.styleobject.restart = true;
    } else if (this.text == "恢复计时器") {
      this.styleobject.resume = true;
    }
  }
};
</script>

<style>
.countup {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 310px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.countdown {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 428px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.clear {
  background-color: #dd2e1d;
  border-radius: 5px;
  border-color: #dd2e1d;
  position: absolute;
  left: 964px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.pause {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 227px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.restart {
  background-color: #ffb020;
  border-radius: 5px;
  border-color: #ffb020;
  position: absolute;
  left: 1082px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.resume {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 227px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #ffffff;
}
</style>

将app.vue改为

<template>
  <div id="app">
    <div class="toolbar">
      <div v-show="initialseen">
        <input v-model="hour" id="hour" />

        <input v-model="minute" id="minute" />

        <input v-model="second" id="second" />

        <span id="hourlabel">时</span>

        <span id="minutelabel">分</span>

        <span id="secondlabel">秒</span>

        <counter-button text="开始正计时" v-on:click-button="startcountup" id="countup"></counter-button>

        <counter-button text="开始倒计时" v-on:click-button="startcountdown" id="countdown"></counter-button>
      </div>

      <span id="hint" v-show="hintseen">{{ hint }}</span>

      <counter-button v-bind:text="cleartext" v-on:click-button="clearcounter" v-show="clearseen" id="clear"></counter-button>
      <counter-button text="暂停计时器" v-on:click-button="pausecounter" v-show="pauseseen" id="pause"></counter-button>
      <counter-button text="重新再计时" v-on:click-button="restartcounter" v-show="restartseen" id="restart"></counter-button>
      <counter-button text="恢复计时器" v-on:click-button="resumecounter" v-show="resumeseen" id="resume"></counter-button>
    </div>
    <span id="time">{{ time }}</span>
  </div>
</template>

<script>
import counterbutton from "./components/counterbutton";
export default {
  name: "app",
  data: function() {
    return {
      status: 1,
      // status---1: before start; 2: up timing; 3: down timing; 4: up pausing;
      // 5: down pausing; 6: down finished;
      hour: null,
      minute: null,
      second: null,
      time: "00:00:00",
      timer: null,
      hour: 0,
      minute: 0,
      second: 0,
      millisecond: 0,
      hourstring: "",
      minutestring: "",
      secondstring: "",
      recordhour: 0,
      recordminute: 0,
      recordsecond: 0,
      recordmillisecond: 0,
      hint: "正在倒计时 12:20:00",
      cleartext: "清空倒计时",
      initialseen: true,
      clearseen: false,
      pauseseen: false,
      restartseen: false,
      resumeseen: false,
      hintseen: false
    };
  },
  methods: {
    format: function(hour, minute, second) {
      if (second < 10) {
        this.secondstring = "0" + second;
      } else {
        this.secondstring = second;
      }

      if (minute < 10) {
        this.minutestring = "0" + minute;
      } else {
        this.minutestring = minute;
      }

      if (hour < 10) {
        this.hourstring = "0" + hour;
      } else {
        this.hourstring = hour;
      }
      return (
        this.hourstring + ":" + this.minutestring + ":" + this.secondstring
      );
    },
    changestatus: function(aimstatus) {
      if (aimstatus == 1) {
        // before start
        this.initialseen = true;
        this.clearseen = false;
        this.pauseseen = false;
        this.restartseen = false;
        this.resumeseen = false;
        this.hintseen = false;
      } else if (aimstatus == 2 || aimstatus == 3) {
        // up timing || down timing
        this.initialseen = false;
        this.clearseen = true;
        this.pauseseen = true;
        this.restartseen = true;
        this.resumeseen = false;
        this.hintseen = true;

        if (aimstatus == 2) {
          this.hint = "正在正计时";
          this.cleartext = "清空正计时";
        } else if (aimstatus == 3) {
          this.recordhour = parseint(this.recordmillisecond / 3600000);
          this.recordminute = parseint(
            (this.recordmillisecond % 3600000) / 60000
          );
          this.recordsecond = parseint((this.recordmillisecond % 60000) / 1000);
          this.hint =
            "正在倒计时 " +
            this.format(this.recordhour, this.recordminute, this.recordsecond);
          this.cleartext = "清空倒计时";
        }
      } else if (aimstatus == 4 || aimstatus == 5) {
        // up pausing || down pausing
        this.initialseen = false;
        this.clearseen = true;
        this.pauseseen = false;
        this.restartseen = true;
        this.resumeseen = true;
        this.hintseen = true;

        if (aimstatus == 4) {
          // up pausing
          this.hint = "暂停正计时";
          this.cleartext = "清空正计时";
        } else if (aimstatus == 5) {
          // down pausing
          this.recordhour = parseint(this.recordmillisecond / 3600000);
          this.recordminute = parseint(
            (this.recordmillisecond % 3600000) / 60000
          );
          this.recordsecond = parseint((this.recordmillisecond % 60000) / 1000);
          this.hint =
            "暂停倒计时 " +
            this.format(this.recordhour, this.recordminute, this.recordsecond);
          this.cleartext = "清空倒计时";
        }
      } else if (aimstatus == 6) {
        // down finished
        this.initialseen = false;
        this.clearseen = true;
        this.pauseseen = false;
        this.restartseen = true;
        this.resumeseen = false;
        this.hintseen = true;

        this.recordhour = parseint(this.recordmillisecond / 3600000);
        this.recordminute = parseint(
          (this.recordmillisecond % 3600000) / 60000
        );
        this.recordsecond = parseint((this.recordmillisecond % 60000) / 1000);
        this.hint =
          "倒计时 " +
          this.format(this.recordhour, this.recordminute, this.recordsecond) +
          " 已结束";
      }
    },
    countup: function() {
      this.millisecond += 50;
      this.hour = parseint(this.millisecond / 3600000);
      this.minute = parseint((this.millisecond % 3600000) / 60000);
      this.second = parseint((this.millisecond % 60000) / 1000);
      this.time = this.format(this.hour, this.minute, this.second);
    },
    countdown: function() {
      this.millisecond -= 50;
      this.hour = parseint(this.millisecond / 3600000);
      this.minute = parseint((this.millisecond % 3600000) / 60000);
      this.second = parseint((this.millisecond % 60000) / 1000);
      if (this.millisecond <= 0) {
        clearinterval(this.timer);
        this.changestatus(6);
      }
      this.time = this.format(this.hour, this.minute, this.second);
    },
    startcountup: function() {
      this.status = 2;
      this.millisecond = 0;
      this.changestatus(this.status);
      this.timer = setinterval(this.countup, 50);
    },
    startcountdown: function() {
      this.status = 3;
      this.hour = this.hour;
      if (this.minute > 59) {
        this.minute = 59;
      } else {
        this.minute = this.minute;
      }
      if (this.second > 59) {
        this.second = 59;
      } else {
        this.second = this.second;
      }

      this.hour = null;
      this.minute = null;
      this.second = null;

      this.millisecond =
        this.hour * 3600000 + this.minute * 60000 + this.second * 1000;
      this.recordmillisecond = this.millisecond;
      this.changestatus(this.status);

      this.timer = setinterval(this.countdown, 50);
    },
    clearcounter: function() {
      this.status = 1;
      this.changestatus(this.status);
      clearinterval(this.timer);
      this.time = this.format(0, 0, 0);
    },
    pausecounter: function() {
      if (this.status == 2) {
        // now count up
        this.status = 4;
        this.changestatus(this.status);
        clearinterval(this.timer);
      } else if (this.status == 3) {
        // now count down
        this.status = 5;
        this.changestatus(this.status);
        clearinterval(this.timer);
      }
    },
    restartcounter: function() {
      if (this.status == 2 || this.status == 4) {
        this.status = 2;
        this.millisecond = 0;
        this.changestatus(this.status);
        clearinterval(this.timer);
        this.timer = setinterval(this.countup, 50);
      } else if ((this.status = 3 || this.status == 5 || this.status == 6)) {
        this.status = 3;
        this.millisecond = this.recordmillisecond;
        this.changestatus(this.status);
        clearinterval(this.timer);
        this.timer = setinterval(this.countdown, 50);
      }
    },
    resumecounter: function() {
      if (this.status == 4) {
        this.status = 2;
        this.changestatus(this.status);
        this.timer = setinterval(this.countup, 50);
      } else if ((status = 5)) {
        this.status = 3;
        this.changestatus(this.status);
        this.timer = setinterval(this.countdown, 50);
      }
    },
    // 键盘事件
    handlekeyup(event) {
      const e = event || window.event || arguments.callee.caller.arguments[0];
      if (!e) return;
      const { key, keycode } = e;
      if (key == "enter") {
        if (this.status == 1) {
          // before start
          this.status = 2;
          this.millisecond = 0;
          this.changestatus(this.status);
          this.timer = setinterval(this.countup, 50);
        }
      } else if (keycode == 32) {
        if (this.status == 2) {
          // now count up
          this.status = 4;
          this.changestatus(this.status);
          clearinterval(this.timer);
        } else if (this.status == 3) {
          // now count down
          this.status = 5;
          this.changestatus(this.status);
          clearinterval(this.timer);
        } else if (this.status == 4) {
          this.status = 2;
          this.changestatus(this.status);
          this.timer = setinterval(this.countup, 50);
        } else if (this.status == 5) {
          this.status = 3;
          this.changestatus(this.status);
          this.timer = setinterval(this.countdown, 50);
        }
      }
    }
  },
  mounted: function() {
    window.addeventlistener("keyup", this.handlekeyup);
  },
  destroyed() {
    window.removeeventlistener("keyup", this.handlekeyup);
  },
  components: {
    counterbutton
  }
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}

.toolbar {
  background-color: #97a5bc;
  width: 1220px;
  height: 70px;
}

#hour {
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 40px;
  top: 15px;
  width: 69px;
  height: 34px;
  font-size: 15px;
}

#hourlabel {
  position: absolute;
  left: 86px;
  top: 24px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #222222;
}

#minute {
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 130px;
  top: 15px;
  width: 69px;
  height: 34px;
  font-size: 15px;
}

#minutelabel {
  position: absolute;
  left: 177px;
  top: 24px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #222222;
}

#second {
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 220px;
  top: 15px;
  width: 69px;
  height: 34px;
  font-size: 15px;
}

#secondlabel {
  position: absolute;
  left: 268px;
  top: 24px;
  font-family: pingfangsc-regular, "pingfang sc", sans-serif;
  font-size: 16px;
  color: #222222;
}

#time {
  position: absolute;
  left: 131px;
  top: 197px;
  font-size: 200px;
  font-family: ptmono-bold, "pt mono", monospace;
  font-weight: 700;
  color: #333333;
}

#hint {
  position: absolute;
  left: 40px;
  top: 24px;
  font-family: ptmono-bold, "pt mono", monospace;
  font-size: 16px;
  color: white;
}
</style>

最后在目录中使用

npm run dev

即可运行该项目。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。