vue中关于默认倒计时,自定义输入时间倒计时

vue中进行倒计时
https://jsrun.net/mzsKp/edit

效果 =====

在这里插入图片描述

html部分代码

<div id="app">
    <input type="num" v-model="time">
    <input type="button"  @click="click_input(time)" value="点击">
    <div>{{ get_code }}</div>
</div>

js部分代码

var app = new Vue({
  el: '#app',
  data() {
    return {
       time:60,// 默认为60秒倒计时,可以输入修改
       get_code:'输入上方倒计时数字 -- 默认60',// 倒计时数字
    }
  }, 
  methods: {
    // 点击倒计时
    click_input(time){
        this.count_down(time)
    },
    // 倒计时
	count_down(time){
		// 开始倒计时
		var time_lang = time
		this.get_code = '正在计时' + time + 's'
		var time_stop = setInterval(()=>{
			--time_lang
			if(time_lang > 0){ // 时常大于0
				this.get_code = '正在计时' + time_lang + 's'	
			}else{ // 倒计时小于0
				time_lang = time
                this.get_code = '倒计时结束'
				clearInterval(time_stop)
			}
		},1000)
	},
  }
});
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值