js 实现不需页面跳转的登录注册界面切换

最新推荐文章于 2024-08-02 22:30:08 发布

ostrichLi

最新推荐文章于 2024-08-02 22:30:08 发布

阅读量8.7k

点赞数 15

分类专栏：从零开始搭建一个购物网站文章标签： JS HTML CSS 前端 php

本文链接：https://blog.csdn.net/qq_26056749/article/details/89262286

版权

从零开始搭建一个购物网站专栏收录该内容

2 篇文章

订阅专栏

最近在写一个 PHP 的作业，在这记下一些关键的实现步骤和一些遇到的难点。

先从最开始的登录注册开始....

参考了各大网站的登录注册页面，发现他们都是在登录页面设置一个没有账号，立即注册的超链接，例如新浪微博的模式（红色圈）

然后跳转到一个注册页面完成注册功能，但是我发现如果把注册表单放在安全登录的位置也是可以的（其实只是想练习一下前端技术），虽然这样会导致每次登录网站都会加载两个表单...

下面是实现的效果：

PS：色彩搭配其实是照搬的微博，哈哈哈哈

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login_div{
            background-color:white;
            width:360px;
            height:500px;
            z-index:2;
            display: block;    /* 为下节实现仿百度的 */
            position:absolute; /* 弹窗式登录效果做准备 */
            border-top:none;
            text-align: center;
        }

        .login_title_div{
            height: 30px;
        }

        .login_title_div a{
            float:right;
            text-decoration:none;
            color:silver;
            margin-right: 8px;
            margin-top: 5px;
        }

        .navi{
            width:100%;
            height: 60px;
            margin-top: 0px;
            font-size:22px;
        }

        .navi img{
            width: 150px;
            float: left;
            margin-top: 25px;
            margin-left: 10px;
        }
        .navi ul{
            float: left;
            color: silver;
            padding: 0px;
            margin-left: 70px;
        }

        .navi li{
            float: left;
            margin-left: 10px;
            list-style-type: none;
        }

        .btn{
            margin-top: 10px;
            width: 230px;
            height: 30px;
            border: 0px;
            background-color: #FFA00A;
            color:white;
            font-family: 微软雅黑;
            font-size: 16px;
        }

        .div_login{
            margin-top: 10px;
        }

        .div_register{
            margin-top: 10px;
            display: none;  /* 要点：先将注册表单的盒子隐藏 */
        }


        .textbox {
            width: 230px;
            height: 30px;
            text-align: center;
            /* border: 0; */
            border: 1px solid silver;
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript">
        // 鼠标悬浮变小手
        function onMouseOver(){
            denglu.style.cursor = 'pointer';
            zhuce.style.cursor = 'pointer';
        }
        // 切换登录/注册界面
        function changePage(val){
            var login_div = document.getElementById("login");
            var register_div = document.getElementById("register");
            if(val == 'login'){
                // 在切换登录注册的同时刷新验证码
                changeCode('login_checkcode_img');

                login_div.style.display = 'block';    // 切换效果的关键，思路就是将要显示的 display设置为 block
                register_div.style.display = 'none';  // 然后将要隐藏的盒子的 display 设置为 none

                denglu.style.borderBottom = '3px solid #FFA00A';
                zhuce.style.borderBottom = '';

            }else if(val == 'register'){
                changeCode('register_checkcode_img');

                login_div.style.display = 'none';     // 同上
                register_div.style.display = 'block';

                denglu.style.borderBottom = '';
                zhuce.style.borderBottom = '3px solid #FFA00A';
            }
        }
        // 刷新验证码
        function changeCode(val){
            var img=document.getElementById(val);
            // 此处的验证码实现代码要自己加
            img.setAttribute('src','../checkcode/createCheckCode.php?r='+Math.random());
        }
    </script>
</head>
<body>
<div id="login_div" class="login_div">
    <!-- 导航栏 -->
    <div id="login_title_div" class="login_title_div" onmousedown="titleMove(this)" onmousemove="cursorToMove(this)">
    </div>
    <!-- 切换登录注册 -->
    <div class='navi'>
        <img src="../../public/img/logo_silver.png" />
        <ul>
            <li id='denglu' style='border-bottom:3px solid #FFA00A;' onmouseover='onMouseOver()' onclick="changePage('login')" >登录</li>
            <li id='zhuce' onmouseover='onMouseOver()' onclick="changePage('register')" >注册</li>
        </ul>
    </div>
    <!-- 登录表单 -->
    <div class='div_login' id='login'>
        <form name='login_form' method="post" action="javascript:void(0)"> <!-- 如果采用 POST 提交方式，在 action 参数位置添加上登录处理的路径即可 -->
            <input id="input_login_id" class="textbox" type="text" name="id" placeholder="请输入账号" value=""/><br/>
            <input id="input_login_psw" class="textbox"type="password" name="psw" placeholder="请输入密码" autocomplete="off" value=""/><br/>
            <input id="input_login_checkcode" class="textbox" type="text" name="checkcode" placeholder="请输入验证码"/><br/>
            <div style="height:20px;"></div>
            <img  id='login_checkcode_img' onclick="changeCode('login_checkcode_img')" src="../checkcode/createCheckCode.php" ><a href="#" onclick="changeCode('login_checkcode_img')">看不清楚，换一张</a><br/>
            <div style="height:20px;"></div>
            <input id="input_login_checkbox" type="checkbox" name="isKeepInfo" value="keep" checked/>在此电脑上保留用户名<br/>
            <div style="height:20px;"></div>
            <input id="input_login_submit" class='btn' type="submit" name='login' value='登陆' />
        </form>
    </div>
    <!-- 注册表单 -->
    <div class='div_register' id='register'>
        <form name='register_form' method="post" action="javascript:void(0)">   <!-- 同上 -->
            <input id="input_register_name" class="textbox" type="text" name="name" placeholder="请输入用户名" value=""/><br/>
            <input id="input_register_psw1" class="textbox" type="password" name="psw" placeholder="请输入密码" autocomplete="off" value=""/><br/>
            <input id="input_register_psw2" class="textbox" type="password" name="check_psw" placeholder="确认密码" autocomplete="off" value=""/><br/>
            <input id="input_register_email" class="textbox" type="text" name="email" placeholder="请输入邮箱" value=""/><br/>
            <input  id="input_register_checkcode" class="textbox" type="text" name="checkcode" placeholder="请输入验证码"/><br/>
            <div style="height:10px;"></div>
            <img  id='register_checkcode_img' onclick="changeCode('register_checkcode_img')"><a href="#" onclick="changeCode('register_checkcode_img')">看不清楚，换一张</a><br/>
            <div style="height:10px;"></div>
            <input id="input_register_submit" class='btn' type="submit" name='register' value='立即注册' />
        </form>
    </div>
    <span id="showError_span" style="color: red;"></span>
</div>
</body>
</html>