vue组件里的倒计时定时器,vue实现倒计时

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

　　本文分享了vue的《秒杀倒计时》组件的具体代码，供大家参考。具体内容如下

　　以下组件使用Vue来实现秒杀倒计时。

开发思路

　　1.请求服务器获取此时的服务器时间(统一以服务器时间为准)

　　2.将用户的当前计算机时间与服务器时间进行比较，以获得时间差。取当前计算机时间-减去时差作为最终时间(定义为当前服务器时间)。

　　3.设置峰值开始时间。

　　4.将峰值时间与服务器的当前时间进行比较，以获得时间差(总共x秒)。

　　5.根据x秒，计算出秒杀开始时间前还有x天x小时x分x秒。

代码实现

　　下面的代码只显示了步骤4和5。

　　组件倒计时. vue

　　模板

　　差异

　　type= datetime-local :min= current time placeholder=请输入峰值开始时间 v-model=startTime

　　按钮@click=提交开始计时/按钮

　　/div

　　差异

　　h1 { { count down } }/h1

　　/div

　　/模板

　　脚本

　　设timer=null

　　LettTextPrefix=还有：从spike开始；

　　从“时刻”导入时刻；

　　导出默认值{

　　名称：“倒计时”，

　　data() { return {

　　电流：力矩()。format (yyyy-mm-ddthh: mm )，//请使用步骤1-3中计算的服务器时间。

　　startTime: moment()。格式( YYYY-MM-DDTHH:mm )，

　　倒计时时间，tiptextprefix 0天，0小时，0分钟和0秒

　　}},

　　方法：{

　　提交：函数(){

　　const _ this=this

　　clearInterval(定时器)；

　　timer=setInterval(()={

　　_ this . count down time=_ this . count down()；

　　}, 1000);

　　},

　　倒计时：函数(){

　　console . log(this . start time)；

　　常数秒=时刻(this.startTime)。diff(新日期，“秒”)；

　　if(秒=0) {

　　clearInterval(定时器)；

　　返回‘秒杀已经开始’；

　　}

　　const秒=秒`；

　　const分钟=(秒-秒)/60；

　　const minute=minutes

　　const hours=(分钟-分钟)/60；

　　const hour=hours $；

　　const day=(小时-小时)/24；

　　const RES=tipTextPrefix day day hour minute minute second second ；

　　返回res

　　}

　　},

　　}

　　/脚本

　　风格

　　/风格

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

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