用javascript实现登录注册界面跳转

先看看成品
这里写图片描述
我们要做的就是这么一个可以跳转的登录注册界面

javascript代码*

var TurnToLogin = () => {
    document.getElementById('form_login_div').style.display = "block";
    document.getElementById('form_register_div').style.display = "none";
}
var TurnToRegister = () => {
    document.getElementById('form_register_div').style.display = "block";
    document.getElementById('form_login_div').style.display = "none";
}

上面这几行代码即界面跳转的核心代码。
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='登陆'/>&nbsp;&nbsp;&nbsp;
    <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 />
    <input type="button" id="regist" value="注册" /><br />
    <input type='button' onclick="TurnToLogin()" value='登陆'/>&nbsp;&nbsp;&nbsp;
    <input type='button' onclick="TurnToRegister()" value='注册' /><br/>
</div>

这里的html简单的实现了一个登陆注册界面，重点是div要有id使得javascript可以获取该div信息，然后对div的display属性进行修改

完整代码：
链接：https://pan.baidu.com/s/1VkL2Ai7xjJPNrYGLlwzhEw 密码：36mx

用javascript实现登录注册界面跳转

猜你喜欢