jQuery倒计时插件
2015-11-30 20:13
721 查看
倒计时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 Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法
- jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解
- jquery checkbox 点击事件
- JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
- jquery中怎么删除<ul>中的整个<li>包括节点
- 基于Jquery实现焦点图淡出淡入效果
- jquery尺寸:宽度与高度
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- jquery给height拼接动态变量
- JavaScript/Jquery:Validform 一句话验证表单内容
- jQuery ajax - post() 方法
- 轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
- jquery小技巧
- 轻松学习jQuery插件EasyUI EasyUI创建树形菜单
- Jquery Validation实用示例及讲解
- jquery- $.ajax请求映射springmvc中的@RequestBody
- jQuery源码学习11——动画
- 轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
- 轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
- Jquery制作--焦点图淡出淡入