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

最新推荐文章于 2026-03-30 03:25:32 发布

原创最新推荐文章于 2026-03-30 03:25:32 发布 · 738 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

vue学习笔记同时被 2 个专栏收录

36 篇文章

订阅专栏

web前段基础知识

18 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单倒计时功能。通过HTML和JavaScript代码展示了如何设置初始时间，并通过按钮触发倒计时过程。倒计时结束后会显示提示信息。

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)
	},
  }
});