vue点击按钮倒计时代码演示

3403771864 发布于2022-11-19 16:35 / 276人阅读

　　点击按钮即可计时如何用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>

服务器托管混合云倒计时按钮功能点击某按钮按钮点击变色按钮点击动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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