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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
js获取Get值的方法
Sep 29 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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 多个submit提交表单 处理方法
2009/07/07 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
javascript回调函数详解
2018/02/06 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python开发游戏的前期准备
2019/05/05 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
python 类之间的参数传递方式
2019/12/20 Python
如何基于Python创建目录文件夹
2019/12/31 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python os.listdir()乱码解决方案
2021/01/31 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
长青弘远的面试题
2012/06/09 面试题
过滤器的用法
2013/10/08 面试题
国家励志奖学金获奖感言
2014/01/09 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
华山导游词
2015/02/03 职场文书
新学期感想
2015/08/10 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
python tkinter实现定时关机
2021/04/21 Python