使用vue实现时间倒计时效果

用vue的方式实现H5页面倒计时功能

时间分为 小时、分钟、秒、值，可以直接复制使用，传入时间大小即可使用。

<div id="app">
		{{ message }}
		<br>
		<div class="time">
			
			<span>{{hour}}</span>
			<span>{{minute}}</span>
			<span>{{seconds}}</span>
		</div>
	</div>

var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!',
				hour: "", //倒计时  小时
				minute: "", // 倒计时 分钟
				seconds: "", //倒计时 秒
				interval: "",
				countdownTime: 15
			},
			mounted() {
				this.setTimer()
				this.setTimeData(this.countdownTime * 60 * 1000);
			},
			methods: {
				setTimeData(cm) {
					console.log(cm, '--cm');
					this.hour = Math.floor((cm / 1000 / 60 / 60) % 24);
					this.hour =
						this.hour.toString().length == 1 ? "0" + this.hour : this.hour;
					this.minute = Math.floor((cm / 1000 / 60) % 60);
					this.minute =
						this.minute.toString().length == 1 ? "0" + this.minute : this.minute;
					this.seconds = Math.floor((cm / 1000) % 60);
					this.seconds =
						this.seconds.toString().length == 1
							? "0" + this.seconds
							: this.seconds;
				},
				setTimer() {
					let _this = this;
					this.interval = setInterval(function () {
						_this.payCountdown(_this.countdownTime * 60 * 1000);
						clearInterval(_this.interval);
					}, 1000);
				},
				/**
				 * 支付倒计时
				 */
				payCountdown(cm) {
					let _this = this;
				
					if (cm >= 0 ) {
						this.hour = Math.floor((cm / 1000 / 60 / 60) % 24);
						this.hour =
							this.hour.toString().length == 1 ? "0" + this.hour : this.hour;
						this.minute = Math.floor((cm / 1000 / 60) % 60);
						this.minute =
							this.minute.toString().length == 1
								? "0" + this.minute
								: this.minute;
						this.seconds = Math.floor((cm / 1000) % 60);
						this.seconds =
							this.seconds.toString().length == 1
								? "0" + this.seconds
								: this.seconds;
						let _msThis = this;
						setTimeout(function () {
							cm -= 1000;
							_msThis.payCountdown(cm);
						}, 1000);
					}
				},
			}
		})