一、僅使用Jquery動態控制改變值
<input id="btn" type="button" onclick="sendMsg();" value="發送校驗碼"/><script type="text/javascript" src=".../js/jquery.min.js"></script>
<script type="text/javascript">
function sendMsg() {
var checked = 1;
//設置時長5秒
var time = 5;
function changeTimeDynamic) {
if (time == 0) {
clearInterval(timer);
$('#btn').val("發送校驗碼");
$('#btn').attr("disabled", false);
checked = 1;
return true;
}
$('#btn').val(time + "S後再次發送");
time--;
return false;
checked = 0;
}
//值正在改變時，禁止點擊按鈕
if (time > 0) {
$('#btn').attr("disabled", true);
}
changeTimeDynamic();
//1秒執行一次changeTimeDynamic函數
var timer = setInterval(changeTimeDynamic, 1000);
}
</script>
觸發函數後效果：
二、僅使用EasyUI 的 textbox 動態控制改變值（輸入框攜帶按鈕）
<head>
<link rel="stylesheet" type="text/css" href=".../jquery-easyui-1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href=".../static/jquery-easyui-1.5/themes/color.css">
<script type="text/javascript" src=".../jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src=".../jquery-easyui-1.5/jquery.easyui.min.js"></script>
</head>
<body>
<input id="mobile" name="mobile" class="easyui-textbox" required="true"
data-options="buttonText:'獲取校驗碼',validType:['mobile']">
</body><script>
$(function () {
//綁定點擊事件
$('a', $('#mobile').next('span')).click(function (value) {
sendMsg();
});
})
function sendMsg() {
var checked= 1;
var time = 10;
function changeTimeDynamic() {
if (time == 0) {
clearInterval(timer);
$('#mobile').textbox({buttonText: '獲取校驗碼'});
$('#mobile').textbox({readonly: false});
//重新綁定事件,這個很重要，因爲該事件觸發後，需要再次綁定事件纔可繼續被觸發
$('a', $('#mobile').next('span')).click(function () {
sendMsg();
});
sends.checked = 1;
return true;
}
$('#mobile').textbox({buttonText: time + 'S後再次發送'});
time--;
return false;
sends.checked = 0;
}
if (time > 0) {
//設置input不可編輯
$('#mobile').textbox({readonly: true});
}
changeTimeDynamic();
var timer = setInterval(changeTimeDynamic, 1000);
}
}
</script>觸發函數前（函數執行完後）效果：
觸發函數後效果：
