vue实现倒计时功能

简单介绍下倒计时功能

html如下：

<p>倒计时：{{hour}}:{{minute}}:{{second}}</p>

js如下：

<script type="text/javascript">new Vue({el: "#page",data() {return {hours: 1,minutes: 10,seconds: 0}},mounted() {this.add();},methods: {// 防止数值小于10时，出现一位数num(n) {return n < 10 ? '0' + n : '' + n},// 倒计时函数add() {let time = window.setInterval( ()=> {if (this.hours !== 0 && this.minutes === 0 && this.seconds === 0) {this.hours -= 1;this.minutes = 59;this.seconds = 59;} else if (this.hours === 0 && this.minutes !== 0 && this.seconds ===0) {this.minutes -= 1;this.seconds = 59;} else if (this.hours === 0 && this.minutes === 0 && this.seconds ===0) {this.seconds = 0window.clearInterval(time)} else if (this.hours !== 0 && this.minutes !== 0 && this.seconds ===0) {this.minutes -= 1;this.seconds = 59;} else {this.seconds -= 1;}}, 1000)}},watch: {// 监听数值变化second: {handler(newVal) {this.num(newVal)}},minute: {handler(newVal) {this.num(newVal)}},hour: {handler(newVal) {this.num(newVal)}}},computed: {// 初始化数据second() {return this.num(this.seconds)},minute() {return this.num(this.minutes)},hour() {return this.num(this.hours)}}})</script>

num函数是防止小于10时出现的个位数，add函数主要为数据判断

具体样式可以自己去调

vue实现倒计时功能相关推荐

简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
Vue活动倒计时的功能
Vue的活动倒计时功能话不多说,直接上代码吧,我是前端小白一枚,我搬过的砖给大家共享啦~ 欢迎大佬批评指教~ 第一步: 创建组件: <template><div class ...
Vue实现倒计时组件(可自定义时间倒计时功能的组件)：
一.创建countDown.vue(倒计时组件): <template><span :endTime="endTime" :endText="endTe ...
vue实现倒计时定时器
前言本文章将发布vue实现倒计时定时器,可用于考试系统自动交卷.商城未付款倒计时取消订单等效果同时,如不清楚vue时间处理,可查看我上一个文章 vue时间处理倒计时定时器为了制作倒计时定时器, ...
android京东秒杀倒计时,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
python 倒计时功能怎么用print实现_python 实现倒计时功能(gui界面)
运行效果: 完整源码: ##import library from tkinter import * import time from playsound import playsound ## di ...
android倒计时功能,android实现倒计时功能（开始、暂停、0秒结束）
本文实例为大家分享了android实现倒计时功能的具体代码,供大家参考,具体内容如下 [思路]:通过 timer 执行周期延时的任务,handler 中将计时信息更新,并在计时结束时结束 timer ...
js 常用倒计时功能：
为什么80%的码农都做不了架构师?>>> 简单的倒计时功能: <!DOCTYPE html> <html lang="en"> ...

vue实现倒计时功能

vue实现倒计时功能相关推荐

最新文章

热门文章