60秒的倒计时？30分钟的倒计时！！！ vue2.0 --飞机票项目

Hello，在项目中我们经常遇到手机验证码的倒计时60秒！网上一艘一大片，为什么我们不能动脑思考去实现呢？今天分享一个倒计时30分钟的demo，也是我这个项目中遇到的一个。虽然不难，但是理解，思路最重要！上图看效果：分析需要的方法：1. 函数调用==>methods2. 监听数据的变化==> watch3. 计算属性==>

Facing_the_Giants

7145人浏览 · 2017-09-22 16:32:24

Facing_the_Giants · 2017-09-22 16:32:24 发布

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>

大家好！我是杨小宝！感谢您的阅读！

（我特别喜欢一句话：如果不努力，永远不知道自己有多废物）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^