vue中倒计时组件的实例代码

2024-12-07 18:05:53

子组件：

<template>
 <span :endTime="endTime" :callback="callback" :endText="endText">
  <slot>
   {{content}}
  </slot>
 </span>
</template>
<script>
 export default {
  data(){
   return {
   content: '',
   }
  },
  props:{
   endTime:{
    type: String,
    default :''
   },
   endText:{
    type : String,
    default:'已结束'
   },
   callback : {
    type : Function,
    default :''
   }
  },
  mounted () {
   this.countdowm(this.endTime)
  },
  methods: {
   countdowm(timestamp){
   let self = this;
   let timer = setInterval(function(){
    let nowTime = new Date();
    let endTime = new Date(timestamp * 1000);
    let t = endTime.getTime() - nowTime.getTime();
    if(t>0){
     let day = Math.floor(t/86400000);
     let hour=Math.floor((t/3600000)%24);
     let min=Math.floor((t/60000)%60);
     let sec=Math.floor((t/1000)%60);
     hour = hour < 10 ? "0" + hour : hour;
     min = min < 10 ? "0" + min : min;
     sec = sec < 10 ? "0" + sec : sec;
     let format = '';
     if(day > 0){
      format = `${day}天${hour}小时${min}分${sec}秒`;
     }
     if(day <= 0 && hour > 0 ){
      format = `${hour}小时${min}分${sec}秒`;
     }
     if(day <= 0 && hour <= 0){
      format =`${min}分${sec}秒`;
     }
     self.content = format;
     }else{
      clearInterval(timer);
      self.content = self.endText;
      self._callback();
     }
     },1000);
    },
    _callback(){
    if(this.callback && this.callback instanceof Function){
      this.callback(...this);
     }
   }
  }
 }
</script>

父组件：

<count-down endTime="1590761620" :callback="callback" endText="已经结束了"></count-down>
methods:{
callback:function(){
}
}

总结

以上所述是小编给大家介绍的vue中倒计时组件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue2.0实现倒计时的插件(时间戳刷新跳转都不影响)

我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码如下是组件代码: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <sc
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的使用 npm npm install vue-canvas-co
基于vue2.0的活动倒计时组件countdown(附源码下载)

这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数. 查看演示下载源码安装 npm install vue2-countdown --save 使用组件首先在模板部分添加: <template> <div> <count-down v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDown
简单实现vue验证码60秒倒计时功能

本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''
vue+moment实现倒计时效果

本文实例为大家分享了vue+moment实现倒计时的具体代码,供大家参考,具体内容如下示例代码  <span>{{countDown(endDate)}}</span> /*引入日期插件*/ import moment from 'moment' export default { data() { return { now: moment(), endDate: '2019-05-07 08:20:00', } }, mo
Vue验证码60秒倒计时功能简单实例代码

template <template> <div class='login'> <div class="loginHeader"> <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /> <input type="tel" class="codeBtn&q
vue设计一个倒计时秒杀的组件详解

简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路: 1.时间不能是本地客户端的时间必须是服务器的时间这里用一个settimeout代替以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是
vue实现验证码按钮倒计时功能

本人最近开始尝试学习vue.js.想使用vue写一个小例子,就选择做验证码按钮倒计时功能. 上网上搜了一下,也把他们的代码试了一下,自己出了很多问题.所以,需要写一篇基础入门的文章,避免后面人采坑. 这是按照网上写的HTML页面 <div class="register-pannel" id ="register-pannel"> <div class="register-l" align="center"&
基于vue2的canvas时钟倒计时组件步骤解析

今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购.拍卖.下注等业务场景,且对移动端友好. 具体步骤分析: 假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s. 1.开始倒计时后颜色为绿色.绿色含义是:倒计时的时间离结束时间还很长. 2.10s后变黄色.黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用.动画中,出现快速旋转的扇形. 3.5s后变红色.红色
基于vue、react实现倒计时效果

本文实例为大家分享了基于vue.react实现倒计时效果的具体代码,供大家参考,具体内容如下 Vue 方案一:俩个元素 HTML: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span v-if="!sendMsgDisabled"
基于vue的短信验证码倒计时demo

最近做了一个小的demo,分享给大家,在很多地方都能用到. 一般获取短信验证码的时候会用到这个demo: button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span
vue中多个倒计时实现代码实例

下面给出一个效果图,我今天要说的就是实现下图这种多个倒计时很多时候我们做只有一个倒计时的情况比较多,比较简单只需要一个定时器setInterval,算出来赋赋值就好, 但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了拿我自己的vue项目举个例  <div v-for="(item,index) in list" :key="index" class="act_item">
vue 实现小程序或商品秒杀倒计时

下面先给大家介绍下vue 设计一个倒计时秒杀的组件 ,具体内容如下所述: 简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路:1.时间不能是本地客户端的时间必须是服务器的时间这里用一个settimeout代替以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候同步得到现在时间服务时间差,并且在这里边
vue获取验证码倒计时组件

本文实例为大家分享了vue获取验证码倒计时组件,供大家参考,具体内容如下之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template> <div class="captcha-row"> <input class="captcha-input" placeholder="输入验证码" auto-focus /> <div v-if="show
Vue写一个简单的倒计时按钮功能

在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}

vue中倒计时组件的实例代码

相关推荐

随机推荐