js
/**
* 点击按钮后多长时间内按钮不可点
* @param time 时间 以秒为单位
* 可接受 id 及 class 选择器,可同时控制多少个class
*/
$.fn.setBtnTimer = function(options) {
"use strict";
var defaults = {
'time': 60
};
var settings = $.extend({},defaults, options);
this.attr("disabled","disabled");
var that = this,
oldv = that.val(),
timer,
tick = function(){
settings.time--;
that.val(settings.time+'s后可在此操作');
if(settings.time<1){
that.removeAttr("disabled");
window.clearInterval(timer);
that.val(oldv);
}
};
return this.each(function(){
timer = window.setInterval(tick, 1000);
});
}
html
<input type="submit" name="sub" id="sub" class="btn" value="type = submit 提交" />
<input type="button" name="btn" class="btn" value=" type = button 提交" />
<input type="button" name="btn" id="btn" value=" type = button 提交" />
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript">
$(function(){
//用class同时控制多个按钮
$(".btn").click(function(){
$(".btn").setBtnTimer({
'time': 5
});
});
//用id 控制一个按钮
$("#btn").click(function(){
$("#btn").setBtnTimer({
'time': 5
});
});
});
</script>