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>

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

(我特别喜欢一句话:如果不努力,永远不知道自己有多废物)

Logo

前往低代码交流专区

更多推荐