Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用
更新時(shí)間：2021年08月06日 14:25:16 作者：Chernyang
這篇文章主要為大家詳細(xì)介紹了Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
技術(shù)背景
本應(yīng)用使用 vue-cli 框架，并使用了自定義組件（將按鈕拆分成單獨(dú)的組件）和vue 模板。
使用說明
開始正計(jì)時(shí)：點(diǎn)擊工具欄的“開始正計(jì)時(shí)”按鈕即可，快捷鍵為"Enter"鍵。
開始倒計(jì)時(shí)：在輸入框內(nèi)寫入時(shí)間后，點(diǎn)擊“開始倒計(jì)時(shí)”按鈕，即可開始倒計(jì)時(shí)。
暫停計(jì)時(shí)器：點(diǎn)擊“暫停計(jì)時(shí)器”按鈕即可暫停。
清空正/倒計(jì)時(shí)：點(diǎn)擊此按鈕，計(jì)時(shí)器便會(huì)回到初始狀態(tài)，等待新的計(jì)時(shí)。
重新再計(jì)時(shí)：點(diǎn)擊此按鈕，計(jì)時(shí)器便會(huì)重新開始此次計(jì)時(shí)。
恢復(fù)計(jì)時(shí)器：點(diǎn)擊此按鈕即可從暫停狀態(tài)中恢復(fù)。
代碼
首先初始化項(xiàng)目
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 == "開始正計(jì)時(shí)") {
this.styleObject.countup = true;
} else if (this.text == "開始倒計(jì)時(shí)") {
this.styleObject.countdown = true;
} else if (this.text == "清空倒計(jì)時(shí)" || this.text == "清空正計(jì)時(shí)") {
this.styleObject.clear = true;
} else if (this.text == "暫停計(jì)時(shí)器") {
this.styleObject.pause = true;
} else if (this.text == "重新再計(jì)時(shí)") {
this.styleObject.restart = true;
} else if (this.text == "恢復(fù)計(jì)時(shí)器") {
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">時(shí)</span>
<span id="minutelabel">分</span>
<span id="secondlabel">秒</span>
<counter-button text="開始正計(jì)時(shí)" v-on:click-button="startCountUp" id="countup"></counter-button>
<counter-button text="開始倒計(jì)時(shí)" 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="暫停計(jì)時(shí)器" v-on:click-button="pauseCounter" v-show="pauseSeen" id="pause"></counter-button>
<counter-button text="重新再計(jì)時(shí)" v-on:click-button="restartCounter" v-show="restartSeen" id="restart"></counter-button>
<counter-button text="恢復(fù)計(jì)時(shí)器" 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: "正在倒計(jì)時(shí) 12:20:00",
clearText: "清空倒計(jì)時(shí)",
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 = "正在正計(jì)時(shí)";
this.clearText = "清空正計(jì)時(shí)";
} 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 =
"正在倒計(jì)時(shí) " +
this.format(this.recordHour, this.recordMinute, this.recordSecond);
this.clearText = "清空倒計(jì)時(shí)";
}
} 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 = "暫停正計(jì)時(shí)";
this.clearText = "清空正計(jì)時(shí)";
} 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 =
"暫停倒計(jì)時(shí) " +
this.format(this.recordHour, this.recordMinute, this.recordSecond);
this.clearText = "清空倒計(jì)時(shí)";
}
} 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 =
"倒計(jì)時(shí) " +
this.format(this.recordHour, this.recordMinute, this.recordSecond) +
" 已結(jié)束";
}
},
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
即可運(yùn)行該項(xiàng)目。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于Vue方法實(shí)現(xiàn)簡單計(jì)時(shí)器
- 使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
- vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器功能
- vue實(shí)現(xiàn)簡易計(jì)時(shí)器組件
- vue計(jì)時(shí)器的實(shí)現(xiàn)方法
- Vue計(jì)時(shí)器的用法詳解
- 解決vue組件銷毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問題
- Vue 使用計(jì)時(shí)器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
- vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
- vue3封裝計(jì)時(shí)器組件的方法
相關(guān)文章
vue學(xué)習(xí)筆記之vue1.0和vue2.0的區(qū)別介紹
今天我們來說一說vue1.0和vue2.0的主要變化有哪些？對vue相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2017-05-05
vue中el-cascader三級(jí)聯(lián)動(dòng)懶加載回顯問題解決
本文主要介紹了vue中el-cascader三級(jí)聯(lián)動(dòng)懶加載回顯問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
uniapp的頂部導(dǎo)航欄有時(shí)候不符合設(shè)計(jì)需求,我們可以自定義頂部導(dǎo)航欄,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義導(dǎo)航欄的保姆級(jí)教程,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue 讓元素抖動(dòng)/擺動(dòng)起來的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 讓元素抖動(dòng)/擺動(dòng)起來的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解
這篇文章主要介紹了移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue body樣式修改方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了vue?下載文檔亂碼的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用自定義指令實(shí)現(xiàn)頁面底部加水印
本文主要實(shí)現(xiàn)給項(xiàng)目的整個(gè)背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達(dá)數(shù)據(jù)的動(dòng)態(tài)響應(yīng)，有興趣的可以了解一下2017-07-07