一、仅使用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>
触发函数前(函数执行完后)效果:
触发函数后效果: