jquery倒计时插件实现一个按钮点击倒计时回调效果代码-html代码-BFW代码库

jquery倒计时插件实现一个按钮点击倒计时回调效果代码

代码语言：html

代码描述：jquery倒计时插件实现一个按钮点击倒计时回调效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轻量级倒计时demo</title>
		
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/leftTime.min.js"></script>
		
		<style type="text/css">
			*,html,body{padding:0;margin:0;font-size:12px;outline: none;font-family:"微软雅黑",arial;}
			.wrap-box{width:1100px;min-width:1100px; margin:6% auto;}
			h1{line-height:2; font-size:30px; text-align: center; margin-bottom:40px;}
			 table.data-table{width:100%;}
			 table.data-table tr:odd{background:#dcebff;}
			 table.data-table td{line-height:24px;padding:3px;vertical-align: top;}
			 table.data-table th{height:50px;line-height:50px;padding: 3px;font-size:20px;text-align: left;}
			 table.data-table .colspan-a{width:35%;}
			 table.data-table .colspan-b{width:25%;}
			 table.data-table .colspan-c{width:40%;}
			 table.data-table td pre{display: block; padding:5px; border: 1px solid #00caff;background: #f8fcff;text-align: left;}
			.testBtn-a{display: inline-block;height:30px;line-height:30px;padding:0 10px; border:0; border-radius:5px;color:#fff;background:rgb(65,133,244);cursor: pointer;}
			.testBtn-a.on{background:#c9c9c9;color:#666;cursor: default;}
			.data-show-box{line-height:30px;}
			.date-tiem-span,.date-s-span{display: inline-block;font-size:18px; width:36px; height:30px;line-height:30px; text-align: center; color:#fff; border-radius:5px;}
			.date-tiem-span{ background:#333;}
			.date-s-span{ background:#f00;}
			.date-select-a{margin-right:5px;}
		</style>
	</head>
	<body>
	    <div class="wrap-box">
	    	<h1>轻量级倒计时插件</h1>
	    	<table cellpadding="0" cellspacing="0" class="data-table">
	    		<tr>
	    			<th colspan="3">60秒倒计时</th>
	    		</tr>
	    		<tr>
	    			<td class="colspan-a"><button type="button" class="testBtn-a" id="dateBtn1">获取验证码</button></td>
	    			<td class="colspan-b"></td>
	    			<td class="colspan-c">
	    				<pre>$.leftTime(60,function(d){
	//d.status,值true||false,倒计时是否结束;
	//d.s,倒计时秒;
});</pre>
	    				
	    			</td>
	    		</tr>
	    		<script type="text/javascript">
	    			$(function(){
	    				//60秒倒计时
						$("#dateBtn1").on("click",function(){
							var _this=$(this);
							if(!$(this).hasClass("on")){
								$.leftTime(60,function(d){
									if(d.status){
										_this.addClass("on");
										_this.html((d.s=="00"?"60":d.s)+"秒后重新获取");
									}else{
										_this.removeClass("on");
										_this.html("获取验证码");
									}
								});
							}
						});
	    			});
	    		</script>
	    		<tr>
	    			<th colspa.........完整代码请登录后点击上方下载按钮下载查看