⽤javascript实现登录注册界⾯跳转
先看看成品
我们要做的就是这么⼀个可以跳转的登录注册界⾯
javascript代码*
var TurnToLogin = () => {
}
var TurnToRegister = () => {
}
上⾯这⼏⾏代码即界⾯跳转的核⼼代码。
TurnToLogin与TurnToRegister函数实现了登录与注册页⾯的跳转。
通过获取界⾯的id并对该界⾯的display属性进⾏修改，跳转⾄注册界⾯时注册界⾯的display改为block（显⽰），登录界⾯的dispaly改为none（不显⽰）。跳转登录界⾯同理。
css代码
#form_login_div{
display: block;
}
.
.
.
#form_register_div{
display: none;
}
.
.
.
通过css对登录注册界⾯的样式进⾏排版，详细代码就不在这写了，下⾯有链接可以下载
html代码
<div id="form_login_div">
<label>登陆账号</label><br /><br />
<input id="usernumber" type="text" placeholder="请输⼊⼿机号"/><br />
<input id="password" type="password" placeholder="请输⼊密码"/><br />
<input type="button" id="login" value="登陆" /><br />
<input type='button' onclick="TurnToLogin()" value='登陆'/>   
<input type='button' onclick="TurnToRegister()" value='注册' /><br/>
</div>
<div id="form_register_div">
<label>注册账号</label><br /><br />
<input id="usernumber" type="text" placeholder="请输⼊⼿机号" /><br />
<input id="name" type="text" placeholder="请输⼊姓名" /><br />
<input id="password" type="password" placeholder="请输⼊密码" /><br />
<input id="password_again" type="password" placeholder="请确认密码"/><br />
html代码转链接
<input type="button" id="regist" value="注册" /><br />
<input type='button' onclick="TurnToLogin()" value='登陆'/>   
<input type='button' onclick="TurnToRegister()" value='注册' /><br/>
</div>
这⾥的html简单的实现了⼀个登陆注册界⾯，重点是div要有id使得javascript可以获取该div信息，然后对div的display属性进⾏修改

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。