如何用JS与HTML搭建一个简易的登录框

实现内容：登录前部分内容隐藏，登录后隐藏内容显示。以下面名为"Page X"的网页为例。

<div id="pid3" style="display: none">
    <input type="button" value="可隐藏按钮">
    <input type="button"value="可隐藏按钮">
    <input type="button" value="可隐藏按钮">
    <input type="button"value="可隐藏按钮">
</div>

创建一个<div>元素，id为pid3，<div>里可添加任意你需要隐藏的内容，故style="display"属性要选择"none"

为了让这些内容在登录后显示出来，我们需要在“Page X”下添加一些超链接。

<div id="divid">
    <a id="pid1" href="login.html">登录</a>
    <a id="pid2"onclick="Quit()"href="#"style="display:none”>退出</a>

function Quit() {
           localStorage.clear();
           oId3.style.display = "none";
           oId1.style.display = "block";
           oId2.style.display = "none";
       }

<pid1>为"Page x"里跳转到登录框“login.html”的链接，<pid2>则为退出登录的链接。因为退出登录后依然要在本界面，所以href="#"，由于“登录”与“退出”只能保存一个，所以display属性需要选择"none"。至于这个onclick=quit()为点击后执行的一个退出效果，即把一些内容再度隐藏。而localStorage.clear为把登录时缓存在浏览器中的用户名，密码信息清除。至于这些缓存是如何来的，下文进行阐述。

for (i=0;i<name_.length;i++){
       if (localStorage.name==name_[i] && localStorage.password==password_[i]){
           var oId1 = document.getElementById('pid1');
           var oId2 = document.getElementById('pid2');
           var oId3 = document.getElementById('pid3');
           oId1.style.display = "none";
           oId3.style.display = "block";
           oId2.style.display = "block";
       }

是否隐藏的判定，即账户名与密码是否正确，我们需要引入一个"name.js"和"password.js"分别为用户名和密码保存文件，之后用localStorage.name(用户名缓存）、localStorage.password(密码缓存）分别与“name.js”、"password.js"中的“name_”数组、“password_”数组逐个比较，如果用户名，密码正确，则我们将需要隐藏的内容显示，“登录”链接隐藏，“退出”链接显示。

接下来说说我们点击“Page X”中登录按钮后跳转到“login”登录界面的代码。

<script src="name.js"></script>
<script src="password.js"></script>

首先我们依然要引入“name.js”、"password.js"文件用于对比用户名和密码。

<div id="login_box">
    <p>账号：<input type="text"id="username"></p>
    <p>密码：<input type="password"id="password"></p>
    <p><button id="btn"onclick="login()">确定</button></p>
</div>

我们需要创建两个输入框，分别用来承载用户名和密码，一个按钮用于提交。按钮中的onclick="login()"用于在执行点击事件时判定用户名密码是否匹配。

<script>
    function login() {
        var name = document.getElementById("username").value;
        var pas = document.getElementById("password").value;
        for (i=0;i<name_.length;i++) {
            if (name == name_[i] && oPassword == password_[i]) {
                var storage = window.localStorage;
                localStorage.name = name;
                localStorage.password = oPassword;
                setTimeout(window.history.back(), 5000);
                alert("登录成功，5秒后跳转");
                break;
            }
            else {
                alert("您的密码与用户名不匹配");
            }
        }
    }
</script>

我们通过

var name = document.getElementById("username").value;
var pas = document.getElementById("password").value;

来获取用户登录时在文本框中填写的用户名和密码,用其与我们的“name.js”、"password.js"比较，如果用户填写的信息正确，则会出现“登陆成功，秒后跳转”的提示，这里的setTimeout( , )为设定的一个定时器，widow.history.back()即返回到上一个承载内容的页面，“5000”为5000毫秒后执行。这里的localStorage.name和localStorage.password即为上文中提出的浏览器“用户名”、“密码”缓存。由于“Page X”和“login”为两个独立的页面，我们需要用缓存的方式让“Page X”获取到用户登录信息。若用户名与密码不匹配，则会出现提示“您的密码与用户名不匹配”。

另外一个问题是登录密码的安全性问题。在这里我们用的是md5进行加密，在网页中引用“md5.js”进行加密，而“password.js”中的密码则是加密后的，这样做可以具有一定的保密功能。

如何用JS与HTML搭建一个简易的登录框

猜你喜欢