60秒的倒计时?30分钟的倒计时!!! vue2.0 --飞机票项目
来源:互联网 发布:eclipse for linux汉化 编辑:程序博客网 时间:2024/04/29 13:28
Hello,在项目中我们经常遇到 手机验证码的倒计时60秒!网上一艘一大片,为什么我们不能动脑思考去实现呢?今天分享一个倒计时30分钟的demo,也是我这个项目中遇到的一个。虽然不难,但是理解,思路最重要!
上图看效果:
分析需要的方法:
1. 函数调用 ==> methods
2. 监听数据的变化 ==> watch
3. 计算属性 ==> computed
分析逻辑思路:
1.首先我们需要一个点击按钮,然后让它执行定时器的倒计时
2.当我们的秒从60 — > 00 的时候 需要分钟 减一分钟
3.当我们的分钟 等于00 秒 等于 00 的时候 停止定时器 并发送一个请求(ajax、axios…..)
4.最后一点就是我们的样式问题,如果你正常给时间赋值 00 它会自动默认为一个0
实现代码功能:(拆分代码)
<!--HTML 代码--><div id="box"> <p>{{minute}}:{{second}}</p> <button @click='add'>点击倒计时</button></div>
// vue的数据代码(data)var vm = new Vue({ el:'#box', data:{ minutes:30, seconds:0 }})
首先我们先要考虑 页面的样式问题,正常看都是 09 怎么可能是 9 呢?
methods:{ num:function(n){ return n<10 ? "0" + n : "" + n }},computed:{ second:function () { return this.num(this.seconds) }, minute:function () { return this.num(this.minutes) }}
我们进入页面开始,就要计算一下我们的data属性里面的数据。所以这里我写了俩个一个是分钟的计算一个是秒的计算。 里面函数return的是 num这个函数 传入我们的参数。
接下来我们还要监听一下数据的变化,虽然一开始我们已经重新计算了一下,但是我们是倒计时所以我们要时时刻刻的监听我们的数据变化 让他始终保持 我们想要的样式。
watch:{ second:{ handler(newVal){ this.num(newVal) } }, minute:{ handler(newVal){ this.num(newVal) } }},
最后也到了我们定时器:
methods:{ num:function (n) { return n<10 ? "0" + n : "" + n }, add:function () { var _this = this; var time = window.setInterval(function () { if (_this.seconds == 00 && _this.minutes != 00) { _this.seconds = 59; _this.minutes -= 1; }else if(_this.minutes == 00 && _this.seconds == 00){ _this.seconds = 0; window.clearInterval(time); alert('完美') }else{ _this.seconds -= 1 } },1000); }},
解释一下定时器:
为什么我里面没有用es6的箭头函数,因为我的项目要兼容IE!!!!!好吧!在使用es5写法的时候一定要注意 this的指向问题! ==> var _this = this;
定时器大家都知道setInterval(函数,时间),这里我直接将时间赋值给time
里面有三层判断,第一层判断是 判断 秒 等于 0 分钟不能 等于 0 第二层判断是 分钟跟秒钟 等于 0 第三层就是 以上都不是 定时器每一秒 -= 1
总结:第二层判断里面我写了一个alert() 当然我们可以换成数据请求,比如说给后台发送一个请求 告诉后台 验证码失效 等等… 这个demo改改就是60秒的倒计时。如果你倒计时 2小时 那么 加油!我相信你按着我这个能实现的。
哦对了忘记给大家附上全部代码了::::代码走起
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script></head><body> <div id="box"> <p>{{minute}}:{{second}}</p> <button @click='add'>点击倒计时</button> </div></body><script type="text/javascript"> var vm = new Vue({ el:'#box', data:{ minutes:30, seconds:0 }, methods:{ num:function (n) { return n<10 ? "0" + n : "" + n }, add:function () { var _this = this; var time = window.setInterval(function () { if (_this.seconds == 00 && _this.minutes != 00) { _this.seconds = 59; _this.minutes -= 1; }else if(_this.minutes == 00 && _this.seconds == 00){ _this.seconds = 0; window.clearInterval(time); alert('完美') }else{ _this.seconds -= 1 } },1000); } }, watch:{ second:{ handler(newVal){ this.num(newVal) } }, minute:{ handler(newVal){ this.num(newVal) } } }, computed:{ second:function () { return this.num(this.seconds) }, minute:function () { return this.num(this.minutes) } } })</script></html>
大家好!我是杨小宝!感谢您的阅读!
(我特别喜欢一句话:如果不努力,永远不知道自己有多废物)
- 60秒的倒计时?30分钟的倒计时!!! vue2.0 --飞机票项目
- 15秒的倒计时和15分钟的倒计时
- 在vue2.0项目中一个简单的倒计时功能
- 在vue2.0项目中一个简单的倒计时功能
- 双重监听俩个值的变化 vue2.0 -- 飞机票项目
- 分钟秒钟的倒计时
- listView天小时分钟秒倒计时的实现
- 60秒倒计时的一个小JAVASCRIPT
- 60秒倒计时的一个小JAVASCRIPT
- 前端---div的60秒倒计时
- js 日期+分钟+秒 倒计时
- 下拉框的年限循环(2017~1917)vue2.0--飞机票项目
- iOS中 简单易懂的秒杀倒计时/倒计时
- iOS中 简单易懂的秒杀倒计时/倒计时
- 60秒倒计时自动关机
- js 60秒倒计时
- 60秒倒计时
- 倒计时60秒
- Unity异步加载场景loading条
- Map/Set与数组和对象的比较
- 欢迎使用CSDN-markdown编辑器
- XGBoost调参demo(Python)
- 2017年7月最新全国行政规划数据库
- 60秒的倒计时?30分钟的倒计时!!! vue2.0 --飞机票项目
- 关于jstl taglib的错误 Can not find the tag library descriptor for “http://java.sun.com/jstl/core”
- MySQL命令之drop、delete、truncate
- 大型架构
- Scala 之 使用JDBC 操作 mysql
- 【python 文件加密算法】python检测文件的MD5值
- 人工智能学习之前言
- RxJava2的各种恩怨情仇
- java.lang.NoSuchMethodException: com.xxx.xxx.xxx<init>()