1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 注册登录时 在点击获取验证码按钮后 改变按钮状态

注册登录时 在点击获取验证码按钮后 改变按钮状态

时间:2023-04-25 00:58:12

相关推荐

注册登录时 在点击获取验证码按钮后 改变按钮状态

按钮

首先是获取验证码的按钮:

<div class="layui-form-item"><label for="phoneCode" class="layui-form-label">验证码</label><div class="layui-input-inline"><input type="text" id="phoneCode" name="phoneCode" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请填写验证码"></div><button type="button" class="layui-btn" id="btnSendPhoneCode" name="btnSendPhoneCode" onclick="getPhoneCode()">获取验证码</button></div>

这里要注意button的type值是button,很多时候容易写成submit,在点击按钮时,输入框会提示需要填写内容。

当我点击获取验证码按钮,就来到了方法这里:

if (idx > 1) {idx--;$("#btnSendPhoneCode").text(idx + "秒后重新发送");$("#btnSendPhoneCode").addClass("layui-btn-disabled");} else {$("#btnSendPhoneCode").text("发送验证码");$("#btnSendPhoneCode").attr("onclick","getPhoneCode();");$("#btnSendPhoneCode").removeClass("layui-btn-disabled");clearInterval(intv1)}

idx是设置的秒数, 当idx大于1时,进行倒计时,改变按钮的值,并将按钮设置为禁用按钮,不可点击。

当idx小于等于1时,将按钮的值改回,并删除禁用,可再次点击获取验证码,点击后即上一步。

效果图

未点击时:

点击获取验证码:

今天先分享这些,有问题请评论或私信哦。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。