jQuery简单倒计时插件
一、 效果预览
二、 实现
1. 按照特定的类结构布局。
2. 需要先引入jQuery,再引入此文件。
/**
* Author: CC11001100
*
* 简单倒计时
*
* 1. 支持页面内同时存在多个计时器并且不互相干扰
* 2. 支持多种格式,比如可以省略天、小时...等等,前面省略会自动加到后面,最多可以只有秒
* 3. 倒计时可以是秒数,可以是时间戳,可以是日期时间(设置一种即可)
*
* Usage:
*
* <div class="timer-simple-seconds" timer="3600" timestamp="1482737420000" datetime="2016-12-26 15:30:20">
* <span class="day">0</span>天
* <span class="hour">00</span>时
* <span class="minute">00</span>分
* <span class="second">00</span>秒
* </div>
*
*/
/**
* 按结构查找,依赖结构和class
*/
$(function(){ //对所有的计时器进行处理
var timers=$(".timer-simple-seconds");
for(var i=0;i<timers.length;i++){
var timer=$(timers[i]); if(timer.attr("timestamp")){
//如果是时间戳,则预处理一下时间为倒计时秒数
prepareProcessTimestamp2Timer(timer);
}else if(timer.attr("datetime")){
//处理时间格式为倒计时秒数
prepareProcessDatetime2Timer(timer);
}
//先调用一次,避免误差
processTimer(timer);
setInterval(processTimer,1000,timer);
} /**
* doWhat: 这个函数将时间戳预处理成统一的倒计时描述
*
* 对时间做一个预处理,因为如果服务器直接返回剩余的描述的话从服务器相应到客户端虽然短到几百毫秒但总是会有偏差的,这样子不太好
* 所以服务器只需要设置一个时间戳表示到哪里停止就可以了
*/
function prepareProcessTimestamp2Timer(timer){
var total=parseInt(timer.attr("timestamp"));
total=Math.round(total/1000);
var now=new Date().getTime()/1000;
timer.attr("timer",total-now);
} /**
* 将日期时间格式转为倒计时格式
*/
function prepareProcessDatetime2Timer(timer){
var timestamp=new Date(timer.attr("datetime")).getTime();
timer.attr("timestamp",timestamp);
prepareProcessTimestamp2Timer(timer);
} /**
* 倒计时,滴答滴答...
* @param {Object} timer
*/
function processTimer(timer){
var total=parseInt(timer.attr("timer"));
var t=total; //倒计时不能为负
if(total<0) return; //TODO 后续版本加上计时完毕可以回调函数 //找到显示时间的元素
var day=timer.find(".day");
var hour=timer.find(".hour");
var minute=timer.find(".minute");
var second=timer.find(".second"); //刷新计时器显示的值
if(day.length){
var d=Math.floor(t/(60*60*24));
day.text(d);
t-=d*(60*60*24);
}
if(hour.length){
var h=Math.floor(t/(60*60));
hour.text((h<10?"0":"")+h);
t-=h*(60*60);
}
if(minute.length){
var m=Math.floor(t/60);
minute.text((m<10?"0":"")+m);
t-=m*60;
}
if(second.length){
second.text((t<10?"0":"")+t);
} //一秒过去了...
total--;
timer.attr("timer",total);
} });
说明:
1. timer表示剩余的秒数,timestamp表示一个未来的unix时间戳,datetime表示一个yyyy-MM-dd HH:mm:ss格式的字符串表示的时间。
2. 三者只设置一个即可,同时设置会冲突的。
github地址: https://github.com/BenDanChen/simpleTimer
jQuery简单倒计时插件的更多相关文章
- jquery.countdown 倒计时插件的学习
1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
- jQuery自适应倒计时插件
jQuery自适应倒计时插件 在线演示本地下载
- js 简单倒计时插件和使用方法
// 倒计时插件 (function (){ function countdown(config){ var startDate = config.start ? new Date(config.st ...
- jquery简单的插件
$(function() { $.fn.插件名称 = function(options) { var defaults = { Event : "click", //触发响应事件 ...
- jQuery简单日历插件版
先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...
- jquery简单切换插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- jQuery.countdown倒计时插件
https://github.com/hilios/jQuery.countdown 文档:http://hilios.github.io/jQuery.countdown/documentation ...
- jQuery倒计时插件
倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
随机推荐
- Android 千牛数据库分析
标签(空格分隔): 千牛,逆向 问题:Android 千牛登陆后产生保存用户数据的db无法直接用sqlite3打开,需要解密. 反编译Apk后jd-gui查看源码.熟悉的sqlcrypto模块加密,阿 ...
- mysql 错误 ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number 解决办法
MySQL创建用户(包括密码)时,会提示ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number: 问题原因: ...
- 【Phylab2.0】Beta版本项目展示
团队成员 冯炜韬(PM)http://www.cnblogs.com/toka 岳桐宇(后端)http://www.cnblogs.com/mycraftmw 杨子琛(测试&LaTeX)htt ...
- http请求与响应(content-type)
http请求信息由浏览器把地址栏URL信息和页面(html.jsp.asp)组装成http请求消息体(如下). <request-line>(请求消息行)<headers>(请 ...
- ThinkPhp 3.2 常见问题与注意事项
1 命名空间声明必须写在脚本的最前面 如果运行PHP脚本后出现如下错误: Namespace declaration statement has to be the very first statem ...
- [Android]学习笔记之布局
5大布局,其中前3个是常用的,第四个绝对布局已经提示deprecated ![](http://images2015.cnblogs.com/blog/194303/201611/194303-201 ...
- jshint字段的意义
1.安装jshint插件 npm install jshint -g 2.在需要对JS进行语法检测的文件上一层目录添加.jshintrc文件 .jshintrc是一个对象,类似: { " ...
- ASP.NET 判断客户端是否为手机的函数
http://www.cnblogs.com/cxd4321/p/3795911.html
- linux常见命令总结
日志文件说明 /var/log/message 系统启动后的信息和错误日志,是Red Hat最常用的日志之一 /var/log/secure 与系统安全相关的日志信息 /var/log/maillog ...
- vim的编译安装及其插件YouCompleteMe安装
相关的环境: win 7 x64 vs2013 community python 2.7.10 AMD64 python 3.5 AMD64 LLVM 3.5 cmake 3.5 YouCompl ...