js初步认识1—手机发送验证码按钮的实现
现在宽泛应用手机二维码验证登录,其中的“验证码”按钮在其中占据着重要的作 用,这里将记录我一个后端小白怎么自学js实现这个功能的。
首先,在html页面中添加按钮标签,用input中的button标签
<input type="button" id="btn" value="获取验证码" />
接下来就是根据id对button标签的操作
首先是考虑 防止用户重复点击操作,按钮点击后限时按钮不可操作
通过设置限制条件,满足条件时使用按钮的“disabled”(默认是不使用,即按钮正常可点击状态),不满足条件时将其设置为true(按钮为不可用状态),但为了是按钮更加可视化和界面友好性,再点击一次之后,按钮将显示提示字,如上图所示,在这里我们将时间设置为60秒,通过设置setTimeout方法1000毫秒(1秒)进行一次函数调用,代码如下所示。
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="获取验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
上面的代码已经实现了按钮的基本要求,但在我们实际应用中,在点击之后,需要向后端传送手机号,在这里首先要获取手机号的value,不能为空,然后传值。在这里我将相关代码放到函数中,但是存在一个重大问题,else中的条件是每一秒重新调用一次函数,这就导致会向后端传送60次值,所以我在函数之前加了一个全局变量i,用它来限制传送次数再一次点击之后之传送一次。完成代码如下
//验证码获取和按钮限时限制
var i=0;
var wait=60;
function time(o) {
var number = document.getElementById("number").value;//获取电话的值
if (number!="") { //手机号不为空
if (wait == 0) {
o.removeAttribute("disabled");
o.value="获取验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
},1000)
}
if(i<1){
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
var aa = "number="+number;
xmlhttp.open("POST","/yanzhengma",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(aa);
}
i=i+1;
}else {//手机号为空
Cphone.innerHTML = "请输入手机号~";
Cphone.style.color = "red";
Cphone.style.padding = "5px";
return false;
}
}
document.getElementById("btn").onclick=function(){time(this);}
到此,一个完整的验证码发送按钮便制作完成了。