工作当中需要开发一个倒计时插件,于是开始网上先拿来主义,发现好多倒计时的插件,刷新都会变成从头再来,于是自己用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>

引入上面代码之后 换要在vue的methods里加上callback回调函数

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

vue实现倒计时的插件 时间戳 刷新 跳转 都不影响的更多相关文章

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

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: <template> <span :endTime=" ...

  2. vue路由在keep-alive下的刷新问题 对watch的影响

    转载自:https://www.cnblogs.com/dansingal/p/8302100.html 问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新. 1 2 ...

  3. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  4. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  5. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  6. 利用history实现无刷新跳转界面

    看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端), ...

  7. vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  8. vue全局使用axios插件请求ajax

    vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...

  9. js_倒计时去执行函数或则跳转页面

    js_倒计时去执行函数或则跳转页面: var wait = 5; $(document).ready(function () { returnPage(); }); function returnPa ...

随机推荐

  1. Linux巩固记录(6) Hbase环境准备-zookeeper安装

    Hbase是运行在hadoop之上,所以请参考第3篇文章搭建好一个master,两个slave的hadoop环境,我采用的版本为hadoop2.7.4 不了解Hbase的同学可以参考下这篇文章,分析得 ...

  2. 用mac的safari浏览器调试ios手机的网页

    iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...

  3. WebRTC开发基础(WebRTC入门系列3:RTCDataChannel)

    除了视频和音频,webRTC还可以传输其他数据 例子: http://webrtc.github.io/samples/src/content/datachannel/datatransfer/ 应用 ...

  4. python中内建函数isinstance的用法

    语法:isinstance(object,type) 作用:来判断一个对象是否是一个已知的类型. 其第一个参数(object)为对象,第二个参数(type)为类型名(int...)或类型名的一个列表( ...

  5. Windows7下无法打开chm(mk:@MSITStore:路径[cannot open the file mk@MSITstore:路径]),chm索引就关闭的解决办法

    解决方法1是: 1,右键关联chm文件的“打开方式”到\Windows\HH.exe 2,在命令行运行regsvr32 itss.dll 3,在命令行运行regsvr32 hhctrl.ocx 方法2 ...

  6. 为 git 设置 http 代理

    最近基于 PDFium 项目做一些东西.之前得了代码,今天想要更新到最新的,发现怎么都 pull 不下来.后来想起来,可能是 git 没有使用代理的原因.于是添加代理,果然更新成功. 在 git ba ...

  7. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  8. C# 泛型类在使用中约束

    首先看一下泛型的基本语法 访问修饰符 返回类型 泛型方法名 <T>(T 参数)   1):无法在泛型方法内部给任何 T 类型创建实例的对象,因为在泛型方法内部不知道传进来的对象有哪些构造函 ...

  9. php完美匹配邮箱、链接地址和电话号码

    php完美匹配邮箱.链接地址和电话号码 写了好一会有问题,朋友这边很好功能,借用了.嘎嘎 //31日 更新: 匹配手机以及电话号码 重新修改,可支持18开头的手机号,并修改bug,可匹配出字符串中所有 ...

  10. CentOS7系统下YUM安装安装Mongodb 3.4

    第一步 查看是否存在Mongodb配置yum源 切换到yum目录 cd /etc/yum.repos.d/ 查看文件 ls 第二部 不存在添加yum 源 创建文件 touch mongodb-3.4. ...