当前位置 : 主页 > 网络编程 > JavaScript >

jquery实现倒计时

来源:互联网 收集:自由互联 发布时间:2021-06-28
gistfile1.txt (function($){$.fn.count_down = function(options){var defaults = {'eventname':'click','time':60,'start_fun':null,'end_fun':null,'text':' 秒后再发送','classname':'weui-btn_disabled'};var options = $.extend(defaults, options
gistfile1.txt
(function($){
	$.fn.count_down = function(options){
		var defaults = {
			'eventname':'click',
			'time':60,
			'start_fun':null,
			'end_fun':null,
			'text':' 秒后再发送',
			'classname':'weui-btn_disabled'
		};
		var options = $.extend(defaults, options);
		this.each(function(){
			var This = $(this);
			var original = This.html();
			var time;
			var timeid;
			var status = true ;

			if(options.eventname=='auto'){
				on_start();
			}else{
				This.on(options.eventname,on_start);
			}

			/* 开始 */
			function on_start(){
				if(status==true){
					time = parseInt(options.time);
					This.html(time + options.text);
					timeid = window.setInterval(time_fun,1000);
					This.addClass(options.classname)
					if(options.start_fun!=null && $.isFunction(options.start_fun))options.start_fun(This,end_num); /* 执行后续函数 */
				}
			}

			/* 定时函数 */
			function time_fun(){
				time--;
				time>0 ? start_num() : end_num() ;					
			}

			/* 倒数开始 */
			function start_num(){
				status = false;
				This.html(time + options.text);
			}

			/* 倒数结束 */
			function end_num(){
				status = true;
				window.clearInterval(timeid); 
				This.removeClass(options.classname);
				This.html(original);
				if(options.end_fun!=null && $.isFunction(options.end_fun))options.end_fun(This,end_num); /* 执行后续函数 */
			}

		});
	}
})($);



使用说明:
    eventname	// 鼠标事件,默认click
    time		// 倒计时多少秒
    start_fun	// 开始倒计时,执行的函数
    end_fun		// 倒计时结束,执行函数
    text		// 倒计时过程中显示的字
    classname	// 倒计时过程中添加的样式名称
网友评论