vue按钮倒计时,vue组件里的倒计时定时器

　　本文主要详细介绍vue的时间倒计时功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现时间倒计时功能的具体代码，供大家参考。具体内容如下

需求：

　　做剩余支付时间倒计时的效果。

效果图：

代码：

　　模板

　　Div剩余付款时间：{{count}}/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　计数： ，//倒计时

　　秒：864000 //10天的秒

　　}

　　},

　　已安装(){

　　这个。Time() //调用计时器

　　},

　　方法：{

　　//日-时-分-秒格式函数

　　倒计时(){

　　设d=parse int(this . seconds/(24 * 60 * 60))

　　d=d 10？0 d : d

　　设h=parse int(this . seconds/(60 * 60)% 24)；

　　h=h 10？0英尺高：英尺高

　　设m=parse int(this . seconds/60% 60)；

　　m=m 10？0 m : m

　　设s=parse int(this . seconds % 60)；

　　s=s 10？0的：s

　　This.count= m 分钟秒当d 天 h

　　},

　　//定时器未满1秒，参数减1。

　　时间(){

　　setInterval(()={

　　this.seconds -=1

　　this.countDown()

　　}, 1000)

　　},

　　}

　　}

　　/脚本

　　时间的秒可以根据自己的需要修改。

　　我再给大家分享一段代码：vue倒计时。

　　计数时间：函数(){

　　//获取当前时间

　　var Date=new Date()；

　　var now=date . gettime()；

　　//设置过期时间

　　var end Date=new Date( 2018-10-22 23:23:23 )；

　　var end=end date . gettime()；

　　//时差

　　var left time=end-now；

　　//定义变量d，h，m，s保存倒计时的时间

　　if (leftTime=0) {

　　d=math . floor(left time/1000/60/60/24)；

　　this . h=math . floor(left time/1000/60/60% 24)；

　　this . m=math . floor(left time/1000/60% 60)；

　　this . s=math . floor(left time/1000% 60)；

　　}

　　console . log(this . s)；

　　//每秒递归调用countTime方法，显示动态时间效果。

　　setTimeout(this.countTime，1000)；

　　}

　　更多关于倒计时的文章，请查看专题：《倒计时功能》。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。