Jquery EasyUI动态改变值(及输入框携带按钮的使用方法)

本文介绍如何使用Jquery和EasyUI实现按钮的倒计时功能。通过动态修改按钮文字和禁用状态来达到限制重复点击的效果。适用于验证码发送等场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  一、仅使用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>

触发函数前(函数执行完后)效果:

触发函数后效果:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值