在线直播系统源码,默认倒计时,自定义输入时间倒计时

发布时间 2023-05-04 14:03:55作者: 云豹科技-苏凌霄

在线直播系统源码,默认倒计时,自定义输入时间倒计时

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

 

 以上就是在线直播系统源码,默认倒计时,自定义输入时间倒计时, 更多内容欢迎关注之后的文章