vue點(diǎn)擊按鈕倒計(jì)時(shí)代碼演示

3403771864 發(fā)布于2022-11-19 16:35 / 580人閱讀

　　點(diǎn)擊按鈕即可計(jì)時(shí)如何用vue實(shí)現(xiàn)？

　　實(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>

GPU云服務(wù)器云服務(wù)器倒計(jì)時(shí)按鈕功能點(diǎn)擊某按鈕按鈕點(diǎn)擊變色按鈕點(diǎn)擊動(dòng)畫(huà)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/128373.html

相關(guān)文章

task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話(huà)，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫(huà)，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開(kāi)啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。轉(zhuǎn)載自我的個(gè)人博客歡迎大家批評(píng)指正包括5部分：小練習(xí)1-處理用戶(hù)輸入小練習(xí)2-日期對(duì)象的使用小練習(xí)3：輪播圖小練習(xí)4：輸入提示框小練習(xí)...

cnTomato 2019-08-22 10:59 評(píng)論0 收藏0
task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話(huà)，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫(huà)，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開(kāi)啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。轉(zhuǎn)載自我的個(gè)人博客歡迎大家批評(píng)指正包括5部分：小練習(xí)1-處理用戶(hù)輸入小練習(xí)2-日期對(duì)象的使用小練習(xí)3：輪播圖小練習(xí)4：輸入提示框小練習(xí)...

趙春朋 2019-08-01 15:00 評(píng)論0 收藏0
vue 設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件

摘要：簡(jiǎn)介倒計(jì)時(shí)秒殺組件在電商網(wǎng)站中層出不窮不過(guò)思路萬(wàn)變不離其蹤，我自己根據(jù)其他資料設(shè)計(jì)了一個(gè)版的核心思路時(shí)間不能是本地客戶(hù)端的時(shí)間必須是服務(wù)器的時(shí)間這里用一個(gè)代替以為時(shí)間必須統(tǒng)一開(kāi)始時(shí)間，結(jié)束時(shí)間通過(guò)父組件傳入，當(dāng)服務(wù)器時(shí)間在這個(gè)開(kāi)始時(shí)間和結(jié)束簡(jiǎn)介：倒計(jì)時(shí)秒殺組件在電商網(wǎng)站中層出不窮不過(guò)思路萬(wàn)變不離其蹤，我自己根據(jù)其他資料設(shè)計(jì)了一個(gè)vue版的核心思路：1、時(shí)間不能是本地客戶(hù)端的時(shí)間必須是...

番茄西紅柿 2019-04-23 11:41 評(píng)論0 收藏0
用Vue搭建一個(gè)應(yīng)用盒子（三）：音樂(lè)播放器

摘要：組件結(jié)構(gòu)接著我們就該搭建這個(gè)播放器的組件了?？偟脑硎鞘紫全@取音頻的持續(xù)時(shí)間，然后通過(guò)一個(gè)定時(shí)器，不斷更新顯示時(shí)間，播放完成時(shí)，計(jì)時(shí)器停止。這個(gè)頁(yè)面比較簡(jiǎn)單，播放器標(biāo)簽，綁定了事件，即播放完成后執(zhí)行。這個(gè)播放器的開(kāi)發(fā)歷時(shí)2個(gè)多月，并不是說(shuō)它有多復(fù)雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因?yàn)橥涎?，二也是?shí)習(xí)公司項(xiàng)目太緊。8月底結(jié)束實(shí)習(xí)前寫(xiě)完了樣式，之后在家空閑...

appetizerio 2019-08-26 11:33 評(píng)論0 收藏0
iView 發(fā)布 3.0 版本，以及開(kāi)發(fā)者社區(qū)等 5 款新產(chǎn)品

摘要：相對(duì)時(shí)間組件錨點(diǎn)組件面板分割組件分割線組件單元格組件相對(duì)時(shí)間組件用于表示幾分鐘前幾小時(shí)前等相對(duì)于此時(shí)此刻的時(shí)間描述。單元格組件在手機(jī)上比較常見(jiàn)，在上則常用于固定的側(cè)邊菜單項(xiàng)。開(kāi)發(fā)者社區(qū)這是發(fā)布會(huì)最勁爆的一款產(chǎn)品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開(kāi)了 iView 3...

FreeZinG 2019-08-23 10:31 評(píng)論0 收藏0