如何用JS与HTML搭建一个简易的登录框
实现内容:登录前部分内容隐藏,登录后隐藏内容显示。以下面名为"Page X"的网页为例。
[code]<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”下添加一些超链接。
[code]<div id="divid"> <a id="pid1" href="login.html">登录</a> <a id="pid2"onclick="Quit()"href="#"style="display:none”>退出</a>
[code]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为把登录时缓存在浏览器中的用户名,密码信息清除。至于这些缓存是如何来的,下文进行阐述。
[code]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”登录界面的代码。
[code]<script src="name.js"></script> <script src="password.js"></script>
首先我们依然要引入“name.js”、"password.js"文件用于对比用户名和密码。
[code]<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()"用于在执行点击事件时判定用户名密码是否匹配。
[code]<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>
我们通过
[code]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”中的密码则是加密后的,这样做可以具有一定的保密功能。
阅读更多
- 利用node.js+mongodb如何搭建一个简单登录注册的功能详解
- 利用node.js如何搭建一个简易的即时响应服务器
- 【转载】如何搭建一个快速的分布式计算平台?Parallel python提供了简易的方式来实现此目的。
- 一个简单的注册登录页面(包括阿里大于的手机验证)html+JS+AJAX+PHP
- 如何用js写一个简易选项卡
- 新手上道,教你如何使用http://jingyan.baidu.com/article/cdddd41c5cf93353ca00e16d.htm创建一个html+php+js+mysql
- 如何用webgl(three.js)搭建一个3D库房
- 如何用Angular.js和ionic框架搭建一个webApp
- 如何用webgl(three.js)搭建一个3D库房
- 如何用webgl(three.js)搭建一个3D库房
- 利用gulp搭建一个可以自动刷新html、scss、js的服务器
- (NodeJS学习文章收集三) node.js基于express框架搭建一个简单的注册登录Web功能
- 如何从头搭建一个搜索引擎_HTML简介和BeautifulSoup的基础使用
- 如何用webgl(three.js)搭建一个3D库房
- node.js基于express框架搭建一个简单的注册登录Web功能
- 如何用webgl(three.js)搭建一个3D库房
- 如何从头搭建一个搜索引擎_简易的网页框架web.py
- 如何搭建一个简单的本地node.js服务器
- 如何用webgl(three.js)搭建一个3D库房
- 如何用webgl(three.js)搭建一个3D库房