原创

单页面vue实例带倒计时功能

今晚有约了发布于:2021-01-08

```

var app = new Vue({
    el: '#app',
    data: {
        url:''//带采集的网址
        ,list:[] //头像列表
        ,timer: ''
        ,index:0
    }
    ,methods: {
        GetHeads:function () {
            var url="{:url('')}";
            var _this = this;
            if(!this.url){
                error("请填写地址");
                return false;
            }
            var data = {
                url:this.url,
                type:'gethtml'
            }
            $.post(url,data,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    _this.list = e.data;
                } else {
                    error(e.msg);
                }
            })
        },
        DownloadImg:function () {
            var url="{:url('')}";
            var _this = this;
            var data = {
                url:this.list[this.index],
                type:'downloadimg'
            }
            $.post(url,data,function (e) {
                if(e.code ==200){
                    success(e.msg);
                } else {
                    error(e.msg);
                }
            })
            this.index++
            console.log(this.index)
            if(this.index >= this.list.length){
                clearInterval(this.timer)
            }
        },
        TimerStart:function () {
            //页面挂载需要运行的函数
            this.index = 0;
            this.timer = setInterval(this.DownloadImg, 1000);
        }

},
    mounted:function(){

},
    beforeDestroy: function() {
        if (this.timer) {
            console.log("销毁定时器")
            clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
        }
    }

})
```

注:原创不易,转载请注明出处( http://micuu.com/new/1273.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

最后修改与 2022-02-20

上一篇： php利用curl下载远程图片到本地服务器

下一篇： python将代码打包成exe

▶ 珍藏视频

▶ 10分钟高效燃脂

▶ 30天高效瘦脸操

▶ 5分钟缓解颈椎操

友人