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');

总结

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

html 倒计时 插件,JavaScript使用小插件实现倒计时的方法讲解相关推荐

  1. 1507四舍五入c语言,JavaScript中用于四舍五入的Math.round()方法讲解

    此方法返回一个数四舍五入为最接近的整数的值. 语法 Math.round( x ) ; 下面是参数的详细信息: x: 一个数字 返回值: 返回数字四舍五入为最接近的整数的值. 例子: JavaScri ...

  2. html桌面倒计时代码,JavaScript实现简单的数字倒计时

    这里是一个JavaScript中显示倒计时的方法,从10一秒一秒地往下减直到计时结束(即0),代码如下: runCount(10); function runCount(t){ if(t>0){ ...

  3. JavaScript变量高级定义之Object.defineProperty()方法讲解

    简介 Object.defineProperty()方法是用于声明一个变量,类似var let,但是他可以做一些比较高级的选项. 最基本的使用: <!DOCTYPE html> <h ...

  4. android 小插件下载地址,万能小组件小部件

    万能小组件小部件,优质的手机桌面美化工具,您可以自由编辑组件内容,例如时钟.日历.相册.背景.天气等等,还可以快速设置锁屏壁纸,打造专属于自己的个性桌面,简单又好用!非常炫酷哦! 万能小组件小部件介绍 ...

  5. 快速定位代码位置的IDEA小插件

    大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员 古语有云,工欲善其事,必先利其器,我们编码的时候也是一样的,TJ君不止一次的提到过,一个好的编码工具能让我们的编码效率事半功倍,也正因 ...

  6. html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件

    draggable-google-modal是一款可拖拽的谷歌样式纯javascript模态窗口插件.该模态窗口插件使用纯js编写,模态窗口可以任意进行拖动,并且模态窗口可以全屏放大,或左右对齐占据半 ...

  7. safari html5插件安装,Safari巧用小插件 体验不输第三方浏览器

    想必大家平常应该很少使用Safari浏览器,一般都会在手机上下载第三方浏览器来使用,虽然Safari一直在优化但却不及第三方的浏览器来的方便以及用着总有点不顺手.没关系,本篇文章将为您介绍巧妙的装一些 ...

  8. html5 jquery paint plugin,5+最好的画板,并在画布上手动绘制JavaScript和jQuery插件

    本文概述 从定制的签名板到我们的MsPaint个人网络版本, 如果你想进入很棒的画布世界, 这些库都是一个不错的开始.根据实现的难易程度以及API与开发人员之间的友好程度(包括依赖关系)来进行排名. ...

  9. 增强bilibili Chrome 小插件

    bilibiliToolChrome bilibili Chrome 小插件 github:https://github.com/971181317/bilibiliToolChrome edge商店 ...

最新文章

  1. php 多个数组乘积_VLOOKUP参数使用数组
  2. ffmpeg 花屏的问题
  3. aspiration定义_志愿者的定义、理念与精神核心
  4. java监听鼠标接口实现_自定义Java鼠标监听器?
  5. 判断字符串中是否包含指定字符的N种方法对比
  6. 【模型转换】最少点的覆盖区间
  7. 35张动图:关于机房空调水冷系统和风冷系统
  8. sprint演示会议
  9. 【设计模式】之原型模式详解与应用(五)
  10. AUTOSAR-Fee模块
  11. 和平精英分数计算机制,和平精英掉分机制怎么计算
  12. 哈理工院赛-小乐乐搭积木
  13. Makefile中=, :=, ?=和+=的含义
  14. ubuntu20.04静态编译qt5.14.2报错
  15. 2018-8-10-如何写毕业论文-表格
  16. 北风修仙笔记—2020年8月
  17. 浦东搬场公司搬家风水注意事项
  18. web 折线图大数据量拉取展示方案_【第2010期】QQ音乐Android客户端Web页面通用性能优化实践...
  19. 三生三世十里桃花用计算机怎么弄,三生三世十里桃花ios如何用电脑玩 三生三世十里桃花ios模拟器教程...
  20. udec采场开挖教程_UDEC4.0使用说明

热门文章

  1. php 自动加载函数,PHP自动加载的实例详解
  2. postgresql点云las_点云模型_点云模型_模型_时空数据库_PolarDB PostgreSQL 云原生数据库 - 阿里云...
  3. eclipse下拉框里的选项怎么鼠标单击表判断_领导让我预测下一年销量,怎么办?...
  4. 8321r 当前不允许登陆_Apache Shiro安全框架实现身份认证(登陆与登出)
  5. ORACLE如何一次性修改用户连接数?
  6. QT + OpenCV + MinGW 在windows下配置开发环境
  7. gitlab在centons环境下的安装及使用
  8. PHP-02.文件上传、php保存/转移上传的文件、常见的网络传输协议、请求报文及属性、响应报文及属性...
  9. UILocalNotification本地通知
  10. Sharepoint学习笔记---SPList--创建一个带有Lookup字段的List