vue點擊按鈕倒計時代碼演示

3403771864 發布于2022-11-19 16:35 / 485人閱讀

　　點擊按鈕即可計時如何用vue實現？

　　實現效果：

　　1.點擊開始按鈕啟動計時

　　2.點擊重置按鈕計時恢復到00:00:00

　　3.點擊暫停按鈕暫停計時

　　Vue代碼：

　　<template>
　　<div>
　　<div class="timeContainer">{{ time }}</div>
　　<a-button style="margin-right: 20px" type="primary" @click="start"
　　>開始</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: {
　　//開始計時
　　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);
　　},
　　//重新計時
　　reset() {
　　window.clearInterval(this.flag);
　　this.hour = 0;
　　this.minute = 0;
　　this.second = 0;
　　this.time = "00:00:00";
　　},
　　//暫停計時
　　end() {
　　this.flag = clearInterval(this.flag);
　　},
　　//補零
　　complZero(n) {
　　return n < 10 ? "0" + n : "" + n;
　　},
　　},
　　};
　　</script>
　　<style>
　　.timeContainer {
　　font-size: 40px;
　　margin-bottom: 10px;
　　}
　　</style>

云服務器 GPU云服務器倒計時按鈕功能點擊某按鈕按鈕點擊變色按鈕點擊動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128373.html

task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

cnTomato 2019-08-22 10:59 評論0 收藏0
task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

趙春朋 2019-08-01 15:00 評論0 收藏0
vue 設計一個倒計時秒殺的組件

摘要：簡介倒計時秒殺組件在電商網站中層出不窮不過思路萬變不離其蹤，我自己根據其他資料設計了一個版的核心思路時間不能是本地客戶端的時間必須是服務器的時間這里用一個代替以為時間必須統一開始時間，結束時間通過父組件傳入，當服務器時間在這個開始時間和結束簡介：倒計時秒殺組件在電商網站中層出不窮不過思路萬變不離其蹤，我自己根據其他資料設計了一個vue版的核心思路：1、時間不能是本地客戶端的時間必須是...

番茄西紅柿 2019-04-23 11:41 評論0 收藏0
用Vue搭建一個應用盒子（三）：音樂播放器

摘要：組件結構接著我們就該搭建這個播放器的組件了。總的原理是首先獲取音頻的持續時間，然后通過一個定時器，不斷更新顯示時間，播放完成時，計時器停止。這個頁面比較簡單，播放器標簽，綁定了事件，即播放完成后執行。這個播放器的開發歷時2個多月，并不是說它有多復雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因為拖延，二也是實習公司項目太緊。8月底結束實習前寫完了樣式，之后在家空閑...

appetizerio 2019-08-26 11:33 評論0 收藏0
iView 發布 3.0 版本，以及開發者社區等 5 款新產品

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

FreeZinG 2019-08-23 10:31 評論0 收藏0