龙空技术网

vue 倒计时

前端开发 789

前言:

今天你们对“html倒计时源码”大概比较着重,我们都想要了解一些“html倒计时源码”的相关内容。那么小编同时在网摘上汇集了一些对于“html倒计时源码””的相关文章,希望看官们能喜欢,看官们快快来了解一下吧!

html 代码

<button @click="add()">点击开始倒计时</button><p>{{minute}}分{{second}}秒</p>

data() 数据

data() {	return {        minutes: '',        seconds: ''	}}

js 代码

created() {    //Math.floor() 向下取整            let mm = Math.floor(200 / 60);            let ss = 200 - min * 60;            this.seconds = ss;            this.minutes = mm        },methods: {            num: function (n) {                return n < 10 ? '0' + n : '' + n            },            add() {                let _this = this;                let time = setInterval(function () {                    if (_this.seconds === 0 && _this.minutes !== 0) {                        _this.seconds = 59;                        _this.minutes -= 1                    } else if (_this.minutes === 0 && _this.seconds === 0) {                        _this.seconds = 0;                        clearInterval(time)                    } 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)            }        }

效果图

标签: #html倒计时源码 #前端倒计时页面