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 ui css framework
Jun 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
解析php取整的几种方式
2013/06/25 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
python实现猜拳小游戏
2020/04/05 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python中reload重载实例用法
2020/12/15 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
实习心得体会
2014/01/02 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server