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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js漂浮广告实现代码
Aug 15 Javascript
字符串反转_JavaScript
Apr 28 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Angular2数据绑定详解
Apr 18 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
js实现上传图片并显示图片名称
Dec 18 Javascript
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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php数字游戏 计算24算法
2012/06/10 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
Javascript 对象的解释
2008/11/24 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
JS实现自定义弹窗功能
2018/08/08 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python利用opencv保存、播放视频
2020/11/02 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
完美的中文自荐信
2014/05/24 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript