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


Posted in Javascript onMarch 30, 2017

我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码

如下是组件代码:

<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="1490761620" :callback="callback" endText="已经结束了"></count-down>

ednTime 是时间结束之后的时间戳  callback是结束之后的回调  endText是结束之后的文字显示!

以上所述是小编给大家介绍的vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
Javascript中For In语句用法实例
May 14 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
基于Vue实现timepicker
Apr 25 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 #Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 #Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
借助node实战JSONP跨域实例
Mar 30 #Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 #Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 #Javascript
You might like
laravel withCount 统计关联数量的方法
2019/10/10 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
前端微信支付js代码
2016/07/25 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
Python实现在线音乐播放器
2017/03/03 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python 文件查找及内容匹配方法
2018/10/25 Python
基于python实现KNN分类算法
2020/04/23 Python
python数据挖掘需要学的内容
2019/06/23 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python中turtle库的简单使用教程
2020/11/11 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
党员承诺践诺书
2014/05/20 职场文书
邀请函的格式
2015/01/30 职场文书
春秋淹城导游词
2015/02/11 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
预备党员考察意见范文
2015/06/01 职场文书
初中同学会致辞
2015/08/01 职场文书
仓库管理制度范本
2015/08/04 职场文书
创业计划书详解
2019/07/19 职场文书