倒计时jQuery插件

引言

最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京。去北京之前在深圳拿到了大疆创新的offer,但是又有点不太想去,就来北京找工作了,先后拿了VIP、掌阅、乐视的offer,最后偶然的机会,头脑一发热却去了另一家公司,目前看来当时的决定还不错。作为我来说,我绝对不会“煎熬”着在一家公司去熬什么职位,这他妈都是扯淡,现在不会,以后也不会,好的环境和氛围对技术人员很重要,也许我暂时还不适合朝着管理的方向发展,因为目前还很喜欢技术。哈哈,能来北京也要感谢下在北京帮助过我的所有朋友,要不是你们,我这条来自北方的狼就要热死在南方了。

jQuery倒计时插件

关于jQuery插件的相关知识,不太了解的同学可以看下我之前的一篇文章http://www.cnblogs.com/iforever/p/4279006.html

今天在做一个web页面的时候有个地方要用到一个倒计时的功能,之前都是刷新一次页面数字刷新一次,我优化了下,写了个jQuery扩展,输入倒计时的妙数,就可以开启一个时:分:秒格式的倒计时,下面是源代码

(function($){
$.fn.countDown = function(secs) {
secs = parseInt(secs);
var timeId,
me = $(this),
HMSObj,
HMSHtml = '<span><span class="time-border">#HH#</span></span>' +
'<span>:</span>' +
'<span><span class="time-border">#MM#</span></span>' +
'<span>:</span>' +
'<span><span class="time-border">#SS#</span></span>';
var timeId = setInterval(function(){
HMSObj = $.secsToHMS(secs);
me.html(HMSHtml.replace('#HH#', HMSObj.H).replace('#MM#', HMSObj.M).replace('#SS#', HMSObj.S));
secs--;
if(secs < 0) {
clearInterval(timeId);
}
}, 1000); };
$.extend({
secsToHMS : function(secs) {
var H = '00',
M = '00',
S = '00';
H = $.formatTimeDouble(parseInt(secs/3600));
secs %= 3600;
M = $.formatTimeDouble(parseInt(secs/60));
secs %= 60;
S = $.formatTimeDouble(parseInt(secs));
return {
H : H,
M : M,
S : S
}
},
formatTimeDouble: function(time) {
return 10 <= time ? time :
time > 0 ? '0' + time : '00';
}
});
})($);

使用也很简单,$("#renderTime").countDown(1000),就可以看到时间在跳动。

这是我的githubhttps://github.com/aizuyan/jquery.plugin/tree/master/countdown,我将我用过的自己写的jQuery插件全放在这个仓库里。

jQuery倒计时插件的更多相关文章

  1. 20个非常棒的jQuery倒计时脚本

    使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...

  2. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

  3. jQuery自适应倒计时插件

    jQuery自适应倒计时插件 在线演示本地下载

  4. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  5. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  6. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  7. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  8. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  9. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

随机推荐

  1. [转]浅谈CSRF攻击方式

    在CSDN中看到对CSRF攻击的原理及防护文章,讲解浅显易懂,特转之: 来源:http://blog.csdn.net/fationyyk/article/details/50833620 一.CSR ...

  2. LoadRunner 11 安装步骤

    loadrunner 安装步骤: LoadRunner11下载:  在网上可以搜索到,在这个就不提供了. LoadRunner11原理: 破解方法和以前版本相同,我用的是LR8.0的破解文件,同样实用 ...

  3. get_locked_objects_rpt.sql

    在metalink上看到一个脚本(get_locked_objects_rpt.sql),非常不错,如下所示 /*------------------------------------------- ...

  4. linux小技巧

    主机禁止ping: 修改/proc/sys/net/ipv4/icmp_echo_ignore_all 值为1 默认是0 echo '1' > /proc/sys/net/ipv4/icmp_e ...

  5. .NET 类型(Types)的那些事

    引言 您是.Net工程师?那 .NetFramework中的类型您知道有三大类吗?(除了引用类型和值类型,还有?) 引用类型一定在“堆”上,值类型一定在“栈”上? 那引用类型在内存中的布局细节您又知道 ...

  6. 系统集成方案(一).NET集成方案

    NET系统集成有自己独立的登录验证方式.比如,跟报表集成时,不需要再使用报表内置的登录界面,只需要将报表默认的参数用户名fr_username和密码fr_password发送给报表系统,触发一下报表验 ...

  7. 计算机网络-IP类型判断

    第一个类别为A类,最后一个类别为E类,前边三个类别(A类.B类和C类)被用来标识工作站.路由器.交换机以及其他设备,而最后两个类别(D类和E类)被保留做特殊用途. 一个IP地址由32个比特位构成,这就 ...

  8. 理解ThreadLocal(之一)

    ThreadLocal是什么 在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编 ...

  9. c++ const函数是什么意思

    c++ const函数是什么意思 只读类型 const修饰在类的成员函数的尾部,表示这个函数不会修改类的成员.相当于this指针是const的.

  10. 用MATLAB对信号做频谱分析

    1.首先学习下傅里叶变换的东西.学高数的时候老师只是将傅里叶变换简单的说了下,并没有深入的讲解.而现在看来,傅里叶变换似乎是信号处理的方面的重点只是呢,现在就先学习学习傅里叶变换吧. 上面这幅图在知乎 ...