vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)
更新時(shí)間：2022年07月11日 09:03:35 作者：饑餓的帕尼尼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果：
1.點(diǎn)擊開(kāi)始按鈕啟動(dòng)計(jì)時(shí)
2.點(diǎn)擊重置按鈕計(jì)時(shí)恢復(fù)到00:00:00
3.點(diǎn)擊暫停按鈕暫停計(jì)時(shí)
Vue代碼：
<template>
? <div>
? ? <div class="timeContainer">{{ time }}</div>
? ? <a-button style="margin-right: 20px" type="primary" @click="start"
? ? ? >開(kāi)始</a-button
? ? >
? ? <a-button style="margin-right: 20px" type="primary" @click="reset"
? ? ? >重置</a-button
? ? >
? ? <a-button type="primary" @click="end">暫停</a-button>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? flag: null,
? ? ? hour: 0,
? ? ? minute: 0,
? ? ? second: 0,
? ? ? time: "00:00:00",
? ? };
? },
? methods: {
? ? //開(kāi)始計(jì)時(shí)
? ? start() {
? ? ? this.flag = setInterval(() => {
? ? ? ? this.second = this.second + 1;
? ? ? ? if (this.second >= 60) {
? ? ? ? ? this.second = 0;
? ? ? ? ? this.minute = this.minute + 1;
? ? ? ? }
? ? ? ? if (this.minute >= 60) {
? ? ? ? ? this.minute = 0;
? ? ? ? ? this.hour = this.hour + 1;
? ? ? ? }
? ? ? ? this.time =
? ? ? ? ? this.complZero(this.hour) +
? ? ? ? ? ":" +
? ? ? ? ? this.complZero(this.minute) +
? ? ? ? ? ":" +
? ? ? ? ? this.complZero(this.second);
? ? ? }, 1000);
? ? },
? ? //重新計(jì)時(shí)
? ? reset() {
? ? ? window.clearInterval(this.flag);
? ? ? this.hour = 0;
? ? ? this.minute = 0;
? ? ? this.second = 0;
? ? ? this.time = "00:00:00";
? ? },
? ? //暫停計(jì)時(shí)
? ? end() {
? ? ? this.flag = clearInterval(this.flag);
? ? },
? ? //補(bǔ)零
? ? complZero(n) {
? ? ? return n < 10 ? "0" + n : "" + n;
? ? },
? },
};
</script>
<style>
.timeContainer {
? font-size: 40px;
? margin-bottom: 10px;
}
</style>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能
- vue實(shí)現(xiàn)列表倒計(jì)時(shí)
- Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
- Vue實(shí)現(xiàn)倒計(jì)時(shí)小功能
- vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕
- vue實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能
- vue實(shí)現(xiàn)同時(shí)設(shè)置多個(gè)倒計(jì)時(shí)
- Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo(推薦)
相關(guān)文章
vue的列表交錯(cuò)過(guò)渡實(shí)現(xiàn)代碼示例
這篇文章主要介紹了vue的列表交錯(cuò)過(guò)渡實(shí)現(xiàn)代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在Vue3中可以使用`ref`來(lái)獲取DOM元素,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用Ref訪問(wèn)DOM元素的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue的主要思想是組件化開(kāi)發(fā),路由用來(lái)配置組件對(duì)應(yīng)展示路徑,本文給大家介紹vue中路由router配置步驟,創(chuàng)建路由文件——使用路由——配置路由出口,使路由配置內(nèi)容展示在頁(yè)面上,感興趣的朋友跟隨小編一起看看吧2023-12-12
簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn)
這篇文章主要介紹了簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法
這篇文章主要介紹了vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法,因增加 draggable 屬性導(dǎo)致我彈窗表單清空文本框時(shí),從右向左選中字體會(huì)出現(xiàn)拖拽陰影效果,本文給大家介紹vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue?事件獲取當(dāng)前組件的屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面
這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue路由如何實(shí)現(xiàn)登錄攔截，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
如何使用crypto-js對(duì)文件上傳下載進(jìn)行加密處理
這篇文章主要介紹了如何使用crypto-js對(duì)文件上傳下載進(jìn)行加密處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
前端vue框架select下拉數(shù)據(jù)量過(guò)大造成卡頓問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于前端vue框架select下拉數(shù)據(jù)量過(guò)大造成卡頓問(wèn)題解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用select具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07