这是一个面试题,考察方面较多,这是我自己用原生javascript写的,需要的同学可以多看看,我的代码部分只写了主要部分,思路的话看代码很清楚。ajax部分没有写,如果需要的话,可以参考此链接点击打开链接。
代码如下:(设计尺寸是根据浏览器临时调试的,在尺寸部分只为借鉴,下列代码主要用于移动端)
<!DOCTYPE html>
<html>
<head>
<meta charset="Utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--描述和关键词-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--它表示:允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--它指定的iphone中safari顶端的状态条的样式
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)-->
<!-- 以上为手机端自适应所需要的相关属性 -->
<style type="text/css">
.main{
width:100%;
height:150px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
padding:140px;
}
input{
margin:10px 0;
width:250px;
height:30px;
}
#in_pinNum{
width:150px;
}
button{
width:100px;
height:32px;
}
#btn_login{
margin:0 0 0 60px;
}
</style>
</head>
<body>
<div class="main">
手机号:<input type="text" id="in_phoneNum" />
<br>
验证码:<input type="text" id="in_pinNum"/>
<button id="btn_pin" >获取验证码</button>
<br>
<button id="btn_login">登录</button>
</div>
<script>
window.onload = function(){
var oIn_phoneNum = document.getElementById("in_phoneNum");
var oIn_pinNum = document.getElementById("in_pinNum");
var oBtn_pin = document.getElementById("btn_pin");
var oLogin = document.getElementById("btn_login");
var oPno = oIn_phoneNum.value;
var i=60;
oIn_phoneNum.onblur = function(){
if(!oPno.match(/^1[3|5|7|8]\d{9}$/) || oPno == ""){
alert("此号码不正确!请重新输入");
}
var timer = null;
oBtn_pin.onclick = function(){
clearInterval(timer);
/*var i=60;*/
timer = setInterval(function(){
i--;
oBtn_pin.innerHTML = i+"秒后重新发送";
if(i<0){
clearInterval(timer);
oBtn_pin.innerHTML = "重新发送验证码";
}
},1000);
}
}
oLogin.onclick = function(){
if(oPno != "" && oBtn_pin !=""){
//alert("");/*从此过程进入app首页*/
}
}
}
</script>
</body>
</html>
例图:
这里面会有一些错误,希望博客园中的大佬可以指出评论,谢谢!
同时,我希望大佬可以帮我看看document.getElementById()的简化代码,还有当设置了disabled属性后,尝试了两三种解除disabled的方法,结果不尽人意,希望看到的大佬多多留言解答,谢谢!