JavaScript使用小插件实现倒计时的方法讲解


Posted in Javascript onMarch 11, 2019

CountDown.js

一个用来实现简单页面倒计时的轻量级工具

API

CountDown.openTimeCountBySeconds()根据要计时的秒数打开一个显示剩余时间的倒计时

参数:

  • Ele: 放置倒计时的元素
  • CountDownSeconds: 要计时的秒数
  • Sign: 用于给倒计时设置标记 (可以给多个倒计时设置同一个标记)
  • Divider: 分割时分秒的分割符
  • EndFunc: 倒计时结束时执行的方法

ps:以上均为可选参数

示例

CountDown.openTimeCountBySeconds({
      Ele: document.getElementById('h1'),
      CountDownSeconds: 3600,
      Sign: 'flypie',
      Divider: ':',
      EndFunc: function () {
        console.log('end');
      }
    });

CountDown.openTimeCountByStartAndEndDate()根据计时开始和结束时间打开一个显示剩余时间的倒计时

参数:

  • Ele: 放置倒计时的元素
  • StartDate: 倒计时开始时间 (date类型)
  • EndDate: 倒计时结束时间 (date类型)
  • Sign: 用于给倒计时设置标记 (可以给多个倒计时设置同一个标记)
  • Divider: 分割时分秒的分割符
  • EndFunc: 倒计时结束时执行的方法

ps:除StartDate,EndDate外均为可选参数

示例

var startDate = new Date();
    var endDate = new Date();
    endDate.setDate(endDate.getDate()+1);
    CountDown.openTimeCountByStartAndEndDate({
      Ele: document.getElementById('h1'),
      StartDate: startDate,
      EndDate: endDate,
      Sign: 'flypie',
      Divider: ':',
      EndFunc: function () {
        console.log('end');
      }
    });

CountDown.openTimeCountByStartAndEndDate()根据计时开始和结束时间打开一个显示剩余天数加时间的倒计时

参数:

  • Ele: 放置倒计时的元素
  • StartDate: 倒计时开始时间 (date类型)
  • EndDate: 倒计时结束时间 (date类型)
  • Sign: 用于给倒计时设置标记 (可以给多个倒计时设置同一个标记)
  • Divider: 分割时分秒的分割符
  • DateDivider: 天数和时间之间的分隔符
  • EndFunc: 倒计时结束时执行的方法

ps:除StartDate,EndDate外均为可选参数

示例

var startDate = new Date();
    var endDate = new Date();
    endDate.setDate(endDate.getDate()+10);
CountDown.openDateAndTimeCountByStartAndEndDate({
      Ele: document.getElementById('h1'),
      StartDate: startDate,
      EndDate: endDate,
      Sign: 'flypie',
      Divider: ':',
      DateDivider: '天 ',
      EndFunc: function () {
        console.log('end');
      }
    });

CountDown.stopBySign()根据标记零时暂停一个倒计时

CountDown.stopBySign('flypie');

CountDown.resumeBySign()根据标记恢复一个被零时暂停的倒计时

CountDown.resumeBySign('flypie');

CountDown.closeBySign()根据标记永久性地关闭一个倒计时

CountDown.closeBySign('flypie');

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
解读Vue组件注册方式
May 15 Vue.js
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 #Javascript
记录一次完整的react hooks实践
Mar 11 #Javascript
es6数值的扩展方法
Mar 11 #Javascript
Vue实现一个图片懒加载插件
Mar 11 #Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 #Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 #Javascript
配置eslint规范项目代码风格
Mar 11 #Javascript
You might like
PHP 实现的将图片转换为TXT
2015/10/21 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
详解Python中的array数组模块相关使用
2016/07/05 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
python实现图片插入文字
2019/11/26 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
python轮询机制控制led实例
2020/05/03 Python
python相对企业语言优势在哪
2020/06/12 Python
如何通过python检查文件是否被占用
2020/12/18 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
异步传递消息系统的作用
2016/05/01 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
初中生自我鉴定
2014/02/04 职场文书
英语教学随笔感言
2014/02/20 职场文书
手机被没收检讨书
2014/02/22 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
企业员工辞职信范文
2015/05/12 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang