接收的参数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. order by 中 使用decode

    表内容如下: 实现以name字段中的ABCDE的顺序排序,以及按照money字段从小到大排序. select name,money from t2 ,,,,) , money

  2. QWidget可以设置QStyle,它可以绘制很多东西(具体内容没研究,待续)

    QStyle * QWidget::style() const See also QWidget::setStyle(), QApplication::setStyle(), and QApplica ...

  3. 将QT开发的界面程序封装成DLL,在VC中成功调用

    最近手头的一个项目需要做一个QT界面,并且封装成DLL,然后再动态调用DLL给出的接口函数,使封装在DLL内部的QT界面跑起来,在网上查了很多资料,今天终于成功了,经验不敢独享,因为CSDN给了我很多 ...

  4. QT字体的设置

    摘要: QT4.7.0在移植到开发板上的时候,中文支持是必不可少的,如何让QT支持中文,如何制作QT支持的字体文件,如何使QT UI编辑器中的字号与开发板中的字号一致.作者通过实验进行了一一验证. 介 ...

  5. C# 父子类_实例_静态成员变量_构造函数的执行顺序

    今天去面试的时候被一道题问得一点脾气都没有,今天特地来研究下. 子类成员变量,子类静态成员变量,子类构造函数,父类成员变量,父类静态成员变量,父类构造函数的执行顺序. 现在贴上从另外一个.net程序员 ...

  6. Java安装根目录

    bin存放了Java的操作工具,比如编译工具javac.启动JVM的Java等 db存放了Java测试的数据库Derby,企业不用 include存放C++的头文件 jre运行环境,里面有JVM li ...

  7. HDU 4333 Revolving Digits 扩展KMP

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4333 题意:给以数字字符串,移动最后若干位到最前边,统计得到的数字有多少比原来大,有多少和原来同样,有多少 ...

  8. activity之栈管理

    在android中.一个activity组件能够激活还有一个activity组件:本程序activity和其他程序的activity.     若新的被激活的activity组件属于还有一个应用程序, ...

  9. Git(一):Git与版本号控制简单介绍

    Intro 版本号控制系统是什么      版本号控制系统(Version Control System,VCS)能够帮助我们记录和跟踪项目中各文件内容的改动变化.它能够帮我们保存项目的各个版本号.以 ...

  10. Java - 泛型 ( Generic )

    Java - 泛型 ( Generic )     > 泛型的特点         > 解决元素存储的安全性问题         > 解决获取数据元素时,需要类型强转的问题     ...