線上直播系統原始碼,預設倒數計時,自定義輸入時間倒數計時

zhibo系統開發發表於2023-05-04

線上直播系統原始碼,預設倒數計時,自定義輸入時間倒數計時

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


 以上就是線上直播系統原始碼,預設倒數計時,自定義輸入時間倒數計時, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2949817/,如需轉載,請註明出處,否則將追究法律責任。

相關文章