接收的参数end是必须传的,格式是/分隔的日期字符串,start是可选的,不传就是从现在开始倒计时,callback也是可选的,到倒计时接收时执行自定义的函数。

countdown({
'end':'2015/9/1 17:12:00',
'callback':function () {
document.getElementById('countdown').innerHTML = 'the end!';
}
});
(function (){
function countdown(config){
var startDate = config.start ? new Date(config.start) : new Date();
var endDate = new Date(config.end);
var id = config.id || 'countdown'; var time = (endDate - startDate)/1000; if(time < 0){
if(config.callback){
config.callback();
}
return;
} var day = parseInt(time/86400, 10);
var hour = parseInt(time%86400/60/60, 10);
var minute = parseInt(time%86400%3600/60, 10);
var second = parseInt(time%86400%3600%60, 10); setTimeout(function (){
document.getElementById(id).innerHTML = day+' day '+hour+':'+minute+':'+second;
countdown(config);
}, 1000);
} window.countdown = countdown;
})();

一个简单的倒计时js插件的更多相关文章

  1. 从0开始写一个简单的vite hmr 插件

    从0开始写一个简单的vite hmr 插件 0. 写在前面 在构建前端项目的时候,除开基本的资源格式(图片,json)以外,还常常会需要导入一些其他格式的资源,这些资源如果没有第三方vite插件的支持 ...

  2. 一个简单的MariaDB认证插件demo

    代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...

  3. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  4. [JS]手动实现一个横屏滚动公告js插件

    前言 工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写. 本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星) JS横屏滚 ...

  5. 搭建一个简单的node.js服务器

    第一步:安装node.js.可以去官网:https://nodejs.org/en/进行下载. 查看是否成功,只需在控制台输入 node -v.出现版本号的话,就证明成功了. 第二步:编写node.j ...

  6. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

  7. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  8. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  9. 一个简单的页面弹窗插件 jquery.pageMsgFrame.js

    页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处: ...

随机推荐

  1. JavaScript事件处理

    客户端javascript程序采用了异步事件驱动程序,在这种程序设计风格下,当文档,浏览器,元素,或与之相关的对象发生某些有趣的事件时,web浏览器就会产生事件.事件本身不是javascript对象. ...

  2. Ubuntu14.0.4 64位安装ADT问题

    将ADT 解压之后,新建Android工程后没有R文件: google之后说要安装 ia32-libs 提示如下: 安装lib32z1 安装完成后,再次新建工程,报错如下: 编译存在问题:则继续安装以 ...

  3. C#设置标记方法等为否决的不可用

       C#如何标记类里面的方法或者类为否决的,不可使用.在VS IDE编辑器中使用此方法或者类时会用绿色的波浪线标记这个语句,当移动鼠标到这句代码上时,会出现[否决的]方法名,警告“方法名称”已过时: ...

  4. poj 1699 Best Sequence

    http://poj.org/problem?id=1699 题意:给你n个长度为L的序列,求包含这几个序列的最短长度. 先预处理每两个序列之间的关系,然后dfs枚举就行. #include < ...

  5. Android中通过代码获取arrays.xml文件中的数据

    android工程res/valuse文件夹下的arrays.xml文件中用于放各种数组数据,比如字符串数组.整型数组等,数组中的数据可能是具体的值,也有可能是对资源数据的引用,下面针对这两种情况通过 ...

  6. No module named MYSQLdb 问题解决

    问题描述: 报错:ImportError: No module named MySQLdb 对于不同的系统和程序有如下的解决方法: easy_install mysql-python (mix os) ...

  7. MVC4 jquery 样式 主题 用法(案例)

    MVC4已经自带了jquery,新建的项目,基本上什么都不用添加就可以运行,跑项目.(集成了那么多东西,jquery,modernizr,自带的默认权限,生成的模板,但是缺没有一个统一的文档或者什么去 ...

  8. 理解Servlet及其对象

    一.ServeltConfig对象 在Servlet的配置文件中,可以使用一个或多个<init-param>标签为Servlet配置一些初始化参数.而不当Servlet配置了初始化参数后, ...

  9. nat网络穿透整理笔记(思维导图)

    mindmanger整理的,关于Nat穿透,图片太小,可以点击放大,单独看图片.

  10. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载