网页的注册、登录、拦截

Posted on 2021-06-20 In FrontEnd Views: Word count in article: 9.4k Reading time ≈ 9 mins.

本次作业是简单实现网页的注册、登录、拦截

注册部分

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reg.css">
    <script src="fun.js"></script>    
</head>
<body>
    <table align="center" cellpadding="5px">
        <tr>
            <td>&nbsp;</td>
            <td align="left">register</td>
        </tr>
        <tr>
            <td align="right">username:</td>
            <td>
                <input type="text" id="username" autocomplete="off" placeholder="enter your name">
            </td>
        </tr>
        <tr>
            <td align="right">password</td>
            <td>
                <input type="password" id="password" placeholder="enter your password">
            </td>
        </tr>
        <tr>
            <td align="right">confirm password</td>
            <td>
                <input type="password" id="repwd" placeholder="confirm your password">
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <input type="button" value="register" id="register" onclick="reg()">
                <a href="login.html">login</a>
            </td>
        </tr>
    </table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reg.css">
    <script src="fun.js"></script>    
</head>
<body>
    <table align="center" cellpadding="5px">
        <tr>
            <td>&nbsp;</td>
            <td align="left">register</td>
        </tr>
        <tr>
            <td align="right">username:</td>
            <td>
                <input type="text" id="username" autocomplete="off" placeholder="enter your name">
            </td>
        </tr>
        <tr>
            <td align="right">password</td>
            <td>
                <input type="password" id="password" placeholder="enter your password">
            </td>
        </tr>
        <tr>
            <td align="right">confirm password</td>
            <td>
                <input type="password" id="repwd" placeholder="confirm your password">
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <input type="button" value="register" id="register" onclick="reg()">
                <a href="login.html">login</a>
            </td>
        </tr>
    </table>
</body>
</html>

css

*{
    font-size: 18px;
}
table{
    margin-top: 150px;
}
tr{
    height: 50px;
}
a{
    text-decoration: none;
}
#register{
    background-color: gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px #232;
}
#username{
    background-image: url(img/user.JPG);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 5px;
    /* 设置背景图,也就是那个用户名头像的位置 */
    height: 30px;
    padding-left: 35px;
    border: 1px solid gray;
    outline: none;
}
#username:hover{
    border: 1px solid purple;
}
#password,#repwd{
    background-image: url(img/password.JPG);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 5px;
    height: 30px;
    padding-left: 35px;
    border: 1px solid gray;
    outline: none;
}
#password:hover,#repwd:hover{
    border: 1px solid purple;
}

js

function reg() {
    var username = document.getElementById("username").value;
    var pwd = document.getElementById("password").value;
    var repwd = document.getElementById("repwd").value;
    if (username == '') {
        alert("username can't be empty");
        return false;
    }
    if (pwd != repwd) {
        alert("passwords aren't the same");
        return false;
    }
    if (pwd == '' || repwd == '') {
        alert("password can't be empty");
        return false;
    }
    localStorage.setItem("username", username);
    localStorage.setItem("password", pwd);
    // 在浏览器本地添加数据
    alert("register successful");
    window.location.href = "login.html";
    // 跳转到指定界面
}

登录部分

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="login.css">
    <script src="fun.js"></script>    
</head>
<body>
    <table align="center" cellpadding="5px">
        <tr>
            <td>&nbsp;</td>
            <td align="left">login</td>
        </tr>
        <tr>
            <td align="right">username:</td>
            <td>
                <input type="text" id="username" autocomplete="off" placeholder="enter your name">
            </td>
        </tr>
        <tr>
            <td align="left">password</td>
            <td>
                <input type="password" id="password" placeholder="enter your password">
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <input type="button" value="login" id="login" onclick="login()">&nbsp;
                <a href="reg.html">register</a>
            </td>
        </tr>
    </table>
</body>
</html>

css

*{
    font-size: 18px;
}
table{
    margin-top: 150px;
}
tr{
    height: 50px;
}
a{
    text-decoration: none;
}
#login{
    background-color: gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px #232;
}
#username{
    background-image: url(img/user.JPG);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 5px;
    height: 30px;
    padding-left: 35px;
    border: 1px solid gray;
    outline: none;
}
#username:hover{
    border: 1px solid purple;
}
#password{
    background-image: url(img/password.JPG);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 5px;
    height: 30px;
    padding-left: 35px;
    border: 1px solid gray;
    outline: none;
}
#password:hover{
    border: 1px solid purple;
}

js

function login() {
    var username = document.getElementById("username").value;
    var pwd = document.getElementById("password").value;
    if (username == '') {
        alert("username can't be empty");
        return false;
    }
    if (pwd == '') {
        alert("password can't be empty");
        return false;
    }
    if (localStorage.getItem("username")) {
        var name = localStorage.getItem("username").toString();
        var pass = localStorage.getItem("password").toString();
        // 从本地数据库获取信息,判断是否存在相关信息
        if (name == username)
            if (pwd == pass) {
                sessionStorage.setItem("username", name);
                // 在临时数据库载入数据,用于临时性判断是否有登录过
                alert("login success");
                window.location.href = "index.html";                
            } else {
                alert("wrong password");
            }
        else
            alert("wrong username");
    } else {
        alert("username doesn't exist,please register first");        
    }
}

拦截部分

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="fun.js"></script>
</head>
<body onload="check()">
    <!-- 直接在body部分添加check(),触发函数 -->
    <div style="margin: 0 auto;text-align: center;margin-top: 200px;font-size: 32px;" >welcome</div>
</body>
</html>

js

function check() {
    if (sessionStorage.getItem("username")) {
        alert("welcome:"+sessionStorage.getItem("username").toString());
    } else {
        alert("please login first");
        window.location.href = "login.html";
    }
    // 这个判断起到拦截的作用
}