js初步认识1---手机发送验证码按钮的实现

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);}

到此，一个完整的验证码发送按钮便制作完成了。