jQuery倒计时插件
倒计时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倒计时插件的更多相关文章
- 20个非常棒的jQuery倒计时脚本
使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...
- 分享8款绚丽的HTML5/jQuery特效插件
有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...
- jQuery自适应倒计时插件
jQuery自适应倒计时插件 在线演示本地下载
- jquery.countdown 倒计时插件的学习
1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
随机推荐
- 学习linux之用mail命令发邮件
背景 这两天工作比较闲,网上各种冲浪(这个词暴露我的网龄了).看到一位大神的文章更闲 <>.端详一番,原来是用R语言拼接字符串后用shell命令发出去.发现shell命令既然还能直接发邮件 ...
- 阴影 box-shadow
语法: box-shadow:none | <shadow> [ , <shadow> ]* <shadow> = inset? && <le ...
- IIS不能下载ini文件
1.打开IIS. 2.选择站点或者存放*.ini文件的目录,右键菜单中选择属性. 3.选择“HTTP头”选项卡. 4.点击“MINE类型”. 5.点击“新建”. 6.这是跳出一个对话框,在“扩展名”一 ...
- windows系统快捷操作の进阶篇
上次介绍了windows系统上一些自带的常用快捷键,有些确实很方便,也满足了我们的一部分需求.但是我们追求效率的步伐怎会止步于此?这一次我将会进一步介绍windows上提升效率的方法. 一:运行 打开 ...
- ELF Format 笔记(十三)—— 段权限
ilocker:关注 Android 安全(新手) QQ: 2597294287 一个可被系统加载的程序至少拥有一个可加载段.当系统创建可加载段的内存映像时,会根据 p_flags 赋予一定的访问权限 ...
- Java 容器(list, set, map)
java容器类库的简化图: (虚线框表示接口, 实线框表示普通的类, 空心箭头表示特定的类实现了接口, 实心箭头表示某个类可以生成箭头所指的类对象) 继承Collection的主要有Set 和 Lis ...
- [WPF系列]-使用Binding来同步不同控件的Dependency property
简介 项目中经常会用到,同步两个控件的值,本文就简单列举两种方式来同步不同控件的两个Dependency Property. 示例 效果图: 只使用C#代码: //获取slider1的ValueDep ...
- FineReport如何连接和使用MongoDB数据库
随着NoSQL数据库越来越流行,MongoDB数据库作为NoSQL数据库中的领头羊,使用也越来越广泛.为此,FineReport V8.0版本提供了数据连接和数据集接口,可以通过开发一款可以连接和使用 ...
- 使用VNET-to-VNET连接Microsoft Azure国际版和中国版
Microsoft Azure的VNET-to-VNET功能可以实现跨虚拟网络的VPN连接,通过VNET-to-VNET互联的两个虚拟网络可以在同一个订阅下或者隶属不同的订阅,而且可以跨数据中心.这实 ...
- zookeeper安装
http://blog.itpub.net/27099995/viewspace-1394831/ http://blog.csdn.net/huwei2003/article/details/491 ...