简易app登录页面

    这是一个面试题,考察方面较多,这是我自己用原生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的方法,结果不尽人意,希望看到的大佬多多留言解答,谢谢哭可怜可怜

发布了12 篇原创文章 · 获赞 7 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/a18792627168/article/details/79642497