zoukankan      html  css  js  c++  java
  • 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插件全放在这个仓库里。

  • 相关阅读:
    Node项目
    Angular模块/服务/MVVM
    Angular介绍1
    Node环境配置及Gulp工具
    Linux及Git介绍
    数据库MySQL
    ReactiveCocoa 监听枚举类型enumerate 或者 NSInteger类型
    ReactiveCocoa 监听布尔(BOOL)类型改变
    python3.7 urlopen请求HTTPS警告'CERTIFICATE_VERIFY_FAILED'解决办法
    Centos yum命令
  • 原文地址:https://www.cnblogs.com/iforever/p/5008219.html
Copyright © 2011-2022 走看看