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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
javascript if条件判断方法小结
May 17 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
图解JS原型和原型链实现原理
Sep 15 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
JS日历 推荐
2006/12/03 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
js自定义回调函数
2015/12/13 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python中urlparse模块介绍与使用示例
2017/11/19 Python
pow在python中的含义及用法
2019/07/11 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
如何在Python对Excel进行读取
2020/06/04 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
门卫工作岗位职责
2013/12/17 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python