jQuery表单验证按钮倒计时

最新推荐文章于 2020-11-10 11:42:17 发布

shenzhipeng1023

最新推荐文章于 2020-11-10 11:42:17 发布

阅读量377

点赞数

文章标签： jQuery 表单验证按钮短信验证验证码倒计时

本文链接：https://blog.csdn.net/jason_renyu/article/details/79168790

版权

简单实用的按钮倒计时 index.html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 300px;
				margin: 30px auto;
			}
			.btn {
				padding: 10px 15px;
				border: none;
				margin: 0;
				background-color: #1a84dd;
				outline: none;
				cursor: pointer;
				color: #fff;				
			}
		</style>
	</head>
	<body>
		<!--
			基于jQuery的倒计时按钮
		-->
		<div class="box" >
			<button type="button" id="dountDown" class="btn" >发送倒计时</button>
		</div>
	</body>
	<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="countDown.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 元素必须为button,均为参数可选
		$("#dountDown").dountDown({
			watingText: "重新发送", // 发送中等待的文字, 当前为默认值
			watingBgColor: "#bbb", // 等待中背景颜色, 当前为默认值
			watingTextColor: "#666", // 等待中文字颜色, 当前为默认值
			time: 60, // 等待时间 单位秒, 当前为默认值
			clickFun: function(){
				console.log("倒计时开始")
			}, // 点击后执行函数
			backFun: function(){
				console.log("重新开始");
			} // 结束回调函数
			
		});
	</script>
</html>

js部分

/**
 * 按钮倒计时插件
 */
(function($){
	// 倒计时处理
	function downTimeInit(data) {
		// 执行开始回调函数
		if(data.clickFun) {
			data.clickFun();
		}
		// 设置颜色
		downTimeColor(data);		
		// 倒计时进行和重置
		downTimeRun(data);
	}
	function downTimeColor(data) {
		var bgColor = data.watingBgColor;
		var textColor = data.watingTextColor;
		var styleS = (
			"<style type='text/css' >"+
				'.downTime-wating{ background-color: '+bgColor+' !important;color: '+textColor+' !important;cursor: not-allowed !important; }'+
			"</style>"
		)
		
		$(document.head).append(styleS);
	}
	function downTimeRun(data){
		var ithis = data.dome;
		var txt = data.watingText;
		
		ithis.addClass("downTime-wating");
		ithis.attr("disabled","disabled");
		
		var time = data.time;
		ithis.text(txt+"("+time+")");
		
		var downTimer = setInterval(function(){
			time--;
			ithis.text(txt+"("+time+")");
			
			if(time <= 0) {
				
				clearInterval(downTimer);
				ithis.removeClass("downTime-wating");
				ithis.removeAttr("disabled");
				ithis.text(txt);
				// 执行结束回调函数
				if(data.backFun) {
					data.backFun();
				}
			}
		},1000);		
	}
	
	$.fn.dountDown = function(data) {
		var ithis = $(this);
		if(ithis) {			
			var params = {
				dome: ithis, // 当前元素
				watingText: data.watingText || "重新发送", // 发送中等待的文字
				watingBgColor: data.watingBgColor || "#bbb", // 等待中背景颜色
				watingTextColor: data.watingTextColor || "#666", // 等待中文字颜色
				time: data.time || 60, // 等待时间 单位秒
				clickFun: data.clickFun || '', // 点击后执行函数
				backFun: data.backFun || '' // 结束回调函数
			}
			ithis.on("click",function(){
				downTimeInit(params);
			});
		}
	}
	
})(jQuery);

shenzhipeng1023

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单验证按钮倒计时

简单实用的按钮倒计时 index.html部分 .box { width: 300px; margin: 30px auto; } .btn { padding: 10px 15px; border: none; margin: 0; background-color: #1a84dd; outlin
复制链接

扫一扫