Javascript 如何在Vue.js中创建一个简单的10秒倒计时_Javascript_Vue.js

Javascript 如何在Vue.js中创建一个简单的10秒倒计时

javascript vue.js

Javascript 如何在Vue.js中创建一个简单的10秒倒计时,javascript,vue.js,Javascript,Vue.js,我想做一个从10到0的简单倒计时我在网上找到了使用普通javascript的解决方案，但假设我想在Vue中实现。Jquery中的解决方案 {{倒计时} 导出默认值{ 计算：{ 倒计时{ //我如何在这里进行简单的倒计时？ } } } 如何在Vue.js中重新创建相同的功能谢谢请检查这是否适合您 <template> {{ countDown }} </template> <script> export default {

我想做一个从10到0的简单倒计时

我在网上找到了使用普通javascript的解决方案，但假设我想在Vue中实现。Jquery中的解决方案


{{倒计时}
导出默认值{
计算：{
倒计时{
//我如何在这里进行简单的倒计时？
}
}
}

如何在Vue.js中重新创建相同的功能

谢谢

请检查这是否适合您

<template>
   {{ countDown }}
</template>

<script>
    export default {
        data() {
            return {
                countDown : 10
            }
        },
        method: {
            countDownTimer() {
                if(this.countDown > 0) {
                    setTimeout(() => {
                        this.countDown -= 1
                        this.countDownTimer()
                    }, 1000)
                }
            }
        }
        created: {
           this.countDownTimer()
        }
    }
</script>


{{倒计时}
导出默认值{
数据（）{
返回{
倒数：10
}
},
方法：{
倒计时{
如果（此为倒计时>0）{
设置超时（（）=>{
这是倒计时-=1
这个。倒计时（）
}, 1000)
}
}
}
创建：{
这个。倒计时（）
}
}

因此，在vue.js中执行此操作与在js中执行此操作基本相同。
你可以走很多路，但我的方法如下

<template>
    {{ countDown }}
</template>

<script>
    export default {
    created() {
        window.setInterval(autoIncrementTimer, 1000)
    },
    methods() {
        autoIncrementTimer() {
            if (this.timerCount =< 0) {
                return
            }
            timerCount -= 1;
        }
    }
    data() {
        return {
               timerCount: 0;
        }
    },
}

</script>


{{倒计时}
导出默认值{
创建（）{
window.setInterval（自动递增计时器，1000）
},
方法（）{
自动递增计时器（）{
if（this.timerCount=<0）{
返回
}
时间计数-=1；
}
}
数据（）{
返回{
时间计数：0；
}
},
}

为了将其作为计算属性来执行，您需要编写一个get和set函数，而对于这项任务来说，总体上的计算道具似乎是一种过度使用

总结如下：

在数据中创建变量，以存储当前值

在组件

Create（）

上，使用window.setInterval创建循环函数和间隔时间

在您的功能中，根据需要应用安全和减量

如您所见，上面的

实际上是香草js。

这里是我为倒计时计时器制作的组件：

<template>
  <div>
    <slot :hour="hour" :min="min" :sec="sec"></slot>
  </div>
</template>

<script>
export default {
  props : {
    endDate : {  // pass date object till when you want to run the timer
      type : Date,
      default(){
        return new Date()
      }
    },
    negative : {  // optional, should countdown after 0 to negative
      type : Boolean,
      default : false
    }
  },
  data(){
    return{
      now : new Date(),
      timer : null
    }
  },
  computed:{
    hour(){
      let h = Math.trunc((this.endDate - this.now) / 1000 / 3600);
      return h>9?h:'0'+h;
    },
    min(){
      let m = Math.trunc((this.endDate - this.now) / 1000 / 60) % 60;
      return m>9?m:'0'+m;
    },
    sec(){
      let s = Math.trunc((this.endDate - this.now)/1000) % 60
      return s>9?s:'0'+s;
    }
  },
  watch : {
    endDate : {
      immediate : true,
      handler(newVal){
        if(this.timer){
          clearInterval(this.timer)
        }
        this.timer = setInterval(()=>{
          this.now = new Date()
          if(this.negative)
            return
          if(this.now > newVal){
            this.now = newVal
            this.$emit('endTime')
            clearInterval(this.timer)
          }
        }, 1000)
      }
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
  }
}
</script>


导出默认值{
道具：{
endDate:{//pass date对象，直到您想要运行计时器时为止
类型：日期，
默认值（）{
返回新日期（）
}
},
负：{//可选，应在0后倒计时至负
类型：布尔型，
默认值：false
}
},
数据（）{
返回{
现在：新日期（），
计时器：空
}
},
计算：{
小时{
设h=Math.trunc（（this.endDate-this.now）/1000/3600）；
返回h>9？h:'0'+h；
},
min（）{
设m=Math.trunc（（this.endDate-this.now）/1000/60）%60；
返回m>9？m:'0'+m；
},
第（）节{
设s=Math.trunc（（this.endDate-this.now）/1000）%60
返回s>9秒：0+s；
}
},
观察：{
截止日期：{
立即：是的，
处理程序（newVal）{
如果（这个计时器）{
clearInterval（这个.timer）
}
this.timer=setInterval（（）=>{
this.now=新日期（）
如果（这是负数）
返回
如果（this.now>newVal）{
this.now=newVal
此.$emit（'endTime'））
clearInterval（这个.timer）
}
}, 1000)
}
}
},
在…之前{
clearInterval（这个.timer）
}
}

虽然公认的答案行之有效，而且非常好，但实际上可以通过使用Vue.js以稍微简单的方式实现：

使其成为一个组件，以便可以重复使用

<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <script>
        Vue.component('counter', {
            template: '<button v-on:click="countDownTimer()">{{ countDown }}</button>',
            data: function () {
                return {
                    countDown: 10,
                    countDownTimer() {
                        if (this.countDown > 0) {
                            setTimeout(() => {
                                this.countDown -= 1
                                this.countDownTimer();
                            }, 1000)
                        }
                    }
                }
            }
        })

        const app = new Vue({
            el: '#app'
        })
    </script>
</body>


Vue.组件（'计数器'{
模板：“{{倒计时}}”，
数据：函数（）{
返回{
倒数：10，
倒计时{
如果（此为倒计时>0）{
设置超时（（）=>{
这是倒计时-=1
这个.countDownTimer（）；
}, 1000)
}
}
}
}
})
const app=新的Vue({
el:“#应用程序”
})

使用日期

<template>
  <div>{{ time }}</div>
</template>

<script>
export default {
  name: 'Timer',

  props: ['seconds'],

  data: () => ({
    interval: undefined,
    end: new Date(0, 0, 0),
    current: new Date(0, 0, 0, 0, 0, this.seconds)
  }),

  computed: {
    time: {
      get() {
        return this.current.getSeconds();
      },

      set(d) {
        this.current = new Date(0, 0, 0, 0, 0, this.current.getSeconds() + d);
      }
    }
  },

  methods: {
    countDown() {
      this.end >= this.current
        ? clearInterval(this.interval)
        : (this.time = -1);
    }
  },

  created() {
    this.interval = setInterval(this.countDown, 1000);
  }
};
</script>


{{time}}
导出默认值{
名称：“计时器”，
道具：[“秒”]，
数据：（）=>({
间隔：未定义，
结束：新日期（0,0,0），
当前：新日期（0,0,0,0,0，this.seconds）
}),
计算：{
时间：{
得到（）{
返回此.current.getSeconds（）；
},
第（四）组{
this.current=新日期（0,0,0,0,0，this.current.getSeconds（）+d）；
}
}
},
方法：{
倒计时{
this.end>=this.current
？清除间隔（此间隔）
：（this.time=-1）；
}
},
创建（）{
this.interval=setInterval（this.countDown，1000）；
}
};

以防任何人使用的是的DateTime对象而不是本机JS的Date对象

<template>
  <span v-if="timer">
    {{ timeCalculated }}
  </span>
</template>

<script>
import { DateTime } from 'luxon'

export default {
  name: 'CountDownTimer',

  props: {
    endDate: {
      type: String,
      required: true
    }
  },

  data () {
    return {
      now: DateTime.local(),
      timer: null
    }
  },

  computed: {
    timeCalculated () {
      const endDateDateTimeObj = DateTime.fromISO(this.endDate)
      const theDiff = endDateDateTimeObj.diff(this.now, ['hours', 'minutes', 'seconds'])

      return `${theDiff.hours}:${theDiff.minutes}:${Math.round(theDiff.seconds)}`
    }
  },

  watch: {
    endDate: {
      immediate: true,

      handler (endDateTimeStr) {
        const endDateTimeObj = DateTime.fromISO(endDateTimeStr)

        if (this.timer) {
          clearInterval(this.timer)
        }

        this.timer = setInterval(() => {
          this.now = DateTime.local()

          if (this.now > endDateTimeObj) {
            this.now = endDateTimeObj
            clearInterval(this.timer)
          }
        }, 1000)
      }
    }
  },

  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>


{{timecomputed}}
从'luxon'导入{DateTime}
导出默认值{
名称：'倒计时'，
道具：{
截止日期：{
类型：字符串，
必填项：true
}
},
数据（）{
返回{
现在：DateTime.local（），
计时器：空
}
},
计算：{
计算时间（）{
const enddatetimeobj=DateTime.fromISO（this.endDate）
const theDiff=enddatetimeobj.diff（this.now，['hours'，'minutes'，'seconds']）
返回`${theDiff.hours}:${theDiff.minutes}:${Math.round（theDiff.seconds）}`
}
},
观察：{
截止日期：{
立即：是的，
处理程序（endDateTimeStr）{
const endDateTimeObj=DateTime.fromISO（endDateTimeStr）
如果（这个计时器）{
clearInterval（这个.timer）
}
this.timer=setInterval（（）=>{
this.now=DateTime.local（）
如果（this.now>endDateTimeObj）{
this.now=endDateTimeObj
clearInterval（这个.timer）
}
}, 1000)
}
}
},
事先
<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <script>
        Vue.component('counter', {
            template: '<button v-on:click="countDownTimer()">{{ countDown }}</button>',
            data: function () {
                return {
                    countDown: 10,
                    countDownTimer() {
                        if (this.countDown > 0) {
                            setTimeout(() => {
                                this.countDown -= 1
                                this.countDownTimer();
                            }, 1000)
                        }
                    }
                }
            }
        })

        const app = new Vue({
            el: '#app'
        })
    </script>
</body>

<template>
  <div>{{ time }}</div>
</template>

<script>
export default {
  name: 'Timer',

  props: ['seconds'],

  data: () => ({
    interval: undefined,
    end: new Date(0, 0, 0),
    current: new Date(0, 0, 0, 0, 0, this.seconds)
  }),

  computed: {
    time: {
      get() {
        return this.current.getSeconds();
      },

      set(d) {
        this.current = new Date(0, 0, 0, 0, 0, this.current.getSeconds() + d);
      }
    }
  },

  methods: {
    countDown() {
      this.end >= this.current
        ? clearInterval(this.interval)
        : (this.time = -1);
    }
  },

  created() {
    this.interval = setInterval(this.countDown, 1000);
  }
};
</script>

<template>
  <span v-if="timer">
    {{ timeCalculated }}
  </span>
</template>

<script>
import { DateTime } from 'luxon'

export default {
  name: 'CountDownTimer',

  props: {
    endDate: {
      type: String,
      required: true
    }
  },

  data () {
    return {
      now: DateTime.local(),
      timer: null
    }
  },

  computed: {
    timeCalculated () {
      const endDateDateTimeObj = DateTime.fromISO(this.endDate)
      const theDiff = endDateDateTimeObj.diff(this.now, ['hours', 'minutes', 'seconds'])

      return `${theDiff.hours}:${theDiff.minutes}:${Math.round(theDiff.seconds)}`
    }
  },

  watch: {
    endDate: {
      immediate: true,

      handler (endDateTimeStr) {
        const endDateTimeObj = DateTime.fromISO(endDateTimeStr)

        if (this.timer) {
          clearInterval(this.timer)
        }

        this.timer = setInterval(() => {
          this.now = DateTime.local()

          if (this.now > endDateTimeObj) {
            this.now = endDateTimeObj
            clearInterval(this.timer)
          }
        }, 1000)
      }
    }
  },

  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>