用javascript制作简易的QQ登录网页
简易的QQ登录网页，有登录，注册，修改密码等功能。
要创建6个html文件，每个文件有很详细的注释：
1.创建qqmodal.html，文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/*
* 登录QQ号需要的属性
* 1.QQ账号
* localStorage.qqaccount
* 2.QQ密码
* localStorage.qqpassword
* QQ号个人信息的属性
* 1.昵称
* localStorage.nickname
* 2.性别
* localStorage.gender
* 3.生日
* localStorage.birthday
* 4.绑定的手机号
* localStorage.phone
*
*/
//获取登录按钮
var register = document.getElementById("register");
//获取注册按钮
var login = document.getElementById("login");
//登录按钮的功能
register.onclick = function(){
var flag = true;
//定义正则表达式
var accountreg = /^\d{10}$/g;
var passwordreg = /^\w+$/g;
//接收输入的信息
//获取QQ账号
var account = document.getElementById("account").value;
//获取QQ密码
var password = document.getElementById("password").value;
//console.log("account = "+account);
//console.log("password = "+password);
if(accountreg.test(account) && passwordreg.test(password)){
if(account == localStorage.qqaccount && password == localStorage.qqpassword){
}else{
alert("账号或密码有错误！！");
flag = false;
}
}else{
alert("账号或密码有错误！！");
flag = false;
}
return(flag);
}
//console.log(localStorage.id);
}
//console.log(localStorage);
//console.log(typeof localStorage);//object
//console.log(Array.isArray(localStorage));//false
</script>
<style type="text/css">
/* #outer{
text-align: center;
align-content: center;
} */
#outtabel{
text-align: center;
}
#qqaccount{
align-items: center;
}
</style>
</head>
<body>
<div id="outer">
<h2>QQ登录界面</h2>
<table id="outtabel">
<tr>
<td class="word">QQ账号:</td>
<td class="inp">
<input type="text" name="account" id="account" />
</td>
</tr>
<tr>
<td class="word">QQ密码:</td>
<td class="inp">
<input type="text" name="password" id="password" />
</td>
</tr>
<tr>
<td>
<button id="register" value="abc">
<a href="succeelogin.html">登录</a>
</button>
<button id="login" value="abc" >
<a href="qqlogin.html">注册</a>
</button>
<button id="forget" value="abc">
<a href="qqforget.html">忘记密码</a>
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
2.创建qqforget.html，文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var account = document.getElementById("account");
var inputPhone = document.getElementById("inputPhone");
var inputCode = document.getElementById("inputCode");
//生成随机4位验证码
var num = parseInt(Math.random(1,1)*9000+999);
//按下获取验证码按钮
var getRandCode = document.getElementById("getRandCode");
getRandCode.onclick = function(){
var acc = account.value;
var phone = inputPhone.value;
if(acc == localStorage.qqaccount && phone == localStorage.phone){
alert("验证码为:"+num);
}else{
alert("QQ账号或手机号错误！！");
}
};
//按下确认按钮
var sure = document.getElementById("sure");
sure.onclick = function(){
var code = inputCode.value;
var flag = false;
//如果验证码输入正确
if(code == num){
flag = true;
}
return(flag);
};
}
</script>
</head>
<body>
<div>
<table>
<h2>找回密码(^w^)~~</h2>
<tr>
<td>QQ账号:</td>
<td id="qqaccount">
<input type="text" name="account" id="account" value=""/>
</td>
</tr>
<tr>
<td>手机号码:</td>
<td id="phone">
<input type="text" name="inputphone" id="inputPhone" value="" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td id="code">
<input type="text" name="inputcode" id="inputCode" value="" />
</td>
<td>
<button id="getRandCode">获取验证码</button>
</td>
</tr>
<tr>
<td>
<button>
<a href="qqmodal.html">返回</a>
</button>
<button id="sure">
<a href="newpassword.html">确认</a>
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
3.创建newqq.html，文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//创建新账号的对象
/* function newAccount(account , password){
this.account = account;
this.password = password;
}; */
//获取账号
//获取label的对象
var account = document.getElementById("account");
//修改label的值要用innerHTML方法
account.innerHTML = parseInt(Math.random(1,1)*9000000000+999999999);
//弹出账号提示
alert("你获得的QQ账号是:\n"+account.innerHTML);
//设置密码
var password = document.getElementById("password");
//再次输入密码
var repassword = document.getElementById("repassword");
var passlabel = document.getElementById("passlabel");
var newpasslabel = document.getElementById("newpasslabel");
//点击设置密码编辑框
password.onclick = function(){
var pa = password.value;
//设置密码规则
var passwordReg = /^\w{6,}$/ig;
var reg = passwordReg.test(pa);
if(pa){
if(reg){
newpasslabel.innerHTML = "(^w^)";
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
};
/* //当鼠标靠近设置密码编辑框
password.onmousemove = function(){
var pa = password.value;
if(pa){
if(passwordReg.test(pa)){
newpasslabel.innerHTML = "(^w^)";
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
}; */
//当鼠标离开设置密码编辑框
password.onmouseout = function(){
var pa = password.value;
//设置密码规则
var passwordReg = /^\w{6,}$/ig;
var reg = passwordReg.test(pa);
if(pa){
if(reg){
newpasslabel.innerHTML = "(^w^)";
}else{
newpasslabel.innerHTML = "(=_=)";
}
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
};
//点击再次输入密码的编辑框
repassword.onclick = function(){
var repa = repassword.value;
var passwordReg = /^\w{6,}$/ig;
var reg = passwordReg.test(repa);
if(repa){
if(reg){
passlabel.innerHTML = "(^w^)";
}else{
passlabel.innerHTML = "";
//alert("密码至少6位数");
}
}else{
passlabel.innerHTML = "";
}
};
//当鼠标离开再次输入密码的编辑框
repassword.onmouseout = function(){
//alert("nihao");
var pa = password.value;
var repa = repassword.value;
//console.log(pa);
//console.log(repa);
if(pa && repa){
if(pa == repa){
passlabel.innerHTML = "(^w^)";
}else{
passlabel.innerHTML = "(=_=)";
}
}else{
passlabel.innerHTML = "";
}
};
//点击返回登录按钮
var relogin = document.getElementById("relogin");
relogin.onclick = function(){
var pa = password.value;
var repa = repassword.value;
//console.log(pa);
//console.log(repa);
var flag = true;
if(pa && repa){
if(pa == repa){
//如果满足条件就保存密码
localStorage.qqpassword = pa;
localStorage.qqaccount = account.innerHTML;
}else{
alert("密码输入不相同(=_=)~~");
flag = false;
}
}else{
alert("请输入密码~~")
flag = false;
}
return(flag);
};
//点击立即登录按钮
var loginNow = document.getElementById("loginNow");
loginNow.onclick = function(){
var pa = password.value;
var repa = repassword.value;
//console.log(pa);
//console.log(repa);
var flag = true;
if(pa && repa){
if(pa == repa){
//如果满足条件就保存密码
localStorage.qqpassword = pa;
localStorage.qqaccount = account.innerHTML;
}else{
alert("密码输入不相同(=_=)~~");
flag = false;
}
}else{
alert("请输入密码~~")
flag = false;
}
return(flag);
};
};
</script>
</head>
<body>
<div>
<h2>恭喜你注册完成！~~</h2>
<table>
<tr>
<td>你的QQ账号是:</td>
<td>
<label id="account"></label>
</td>
</tr>
<tr>
<td>设置密码:</td>
<td>
<input type="text" name="password" id="password" value=""/>
</td>
<td>
<label id="newpasslabel"></label>
</td>
</tr>
<tr>
<td>再次输入密码:</td>
<td>
<input type="text" name="repassword" id="repassword" value=""/>
</td>
<td>
<label id="passlabel"></label>
</td>
</tr>
<tr>
<td>
<button id="relogin">
<a href="qqmodal.html">返回登录</a>
</button>
<button id="loginNow">
<a href="succeelogin.html">立即登录</a>
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
4.创建succeelogin.html，文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//显示昵称
var nicklabel = document.getElementById("nicklabel");
nicklabel.innerHTML = localStorage.nickname;
//显示性别
var genderlabel = document.getElementById("genderlabel");
genderlabel.innerHTML = localStorage.gender;
//显示生日
var birlabel = document.getElementById("birlabel");
birlabel.innerHTML = localStorage.birthday;
//显示绑定手机号
var phonelabel = document.getElementById("phonelabel");
phonelabel.innerHTML = localStorage.phone;
}
</script>
</head>
<body>
<div>
<h1>恭喜你成功登录QQ(^w^)</h1>
<table>
<tr>你的QQ个人信息:</tr>
<tr>
<td>昵称:</td>
<td>
<label id="nicklabel"></label>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<label id="genderlabel"></label>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<label id="birlabel"></label>
</td>
</tr>
<tr>
<td>绑定的手机号:</td>
<td>
<label id="phonelabel"></label>
</td>
</tr>
</table>
</div>
</body>
</html>
5.创建qqlogin.html，文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取昵称
var inputnick = document.getElementById("inputNick");
inputnick.onclick = function(){
inputnick.value = "";
}
//鼠标离开昵称
inputnick.onmouseleave = function(){
}
//获取性别
var inputman = document.getElementById("inputMan");
var inputwomen = document.getElementById("inputWomen");
inputman.onclick = function(){
inputman.checked = inputman.checked;
inputwomen.checked = !inputman.checked;
}
inputwomen.onclick = function(){
inputwomen.checked = inputwomen.checked;
inputman.checked = !inputwomen.checked;
}
//localStorage.id = "nihao";
//console.log(localStorage.id);
//生成随机4位验证码
var num = parseInt(Math.random(1,1)*9000+999);
//console.log(num);
//按下获取验证码按钮获取验证码
var getRandCode = document.getElementById("getRandCode");
getRandCode.onclick = function(){
alert("验证码为:"+num);
}
//按下确定按钮
var sure = document.getElementById("sure");
sure.onclick = function(){
//获取昵称
var nickname = document.getElementById("inputNick").value;
//获取性别
var gender = "";
if(inputman.checked){
gender = "男生";
}
if(inputwomen.checked){
gender = "女生";
}
//获取出生日期
var birthday = document.getElementById("inputBirthday").value;
//获取手机号码
var phone = document.getElementById("inputPhone").value;
var phoneReg = /^1[3-8][0-9]{9}$/g;
//获取手机验证码
var code = document.getElementById("inputCode").value;
//创建一个返回标志
var flag = false;
if(nickname){
if(gender){
if(birthday){
if(phoneReg.test(phone)){
//检查验证码输入的对不对
if(code == num){
//把信息保存起来
localStorage.nickname = nickname;
localStorage.gender = gender;
localStorage.birthday = birthday;
localStorage.phone = phone;
/* console.log(localStorage.nickname);
console.log(localStorage.gender);
console.log(localStorage.birthday);
console.log(localStorage.phone); */
flag = true;
}else{
alert("请输入验证码(^w^)~~");
}
}else{
alert("手机号码不合法(=_=)~~")
}
}else{
alert("你忘记输入生日了(=_=)~~");
}
}else{
alert("选择性别(^w^)~~");
}
}else{
alert("请输入昵称(^w^)~~");
}
return(flag);
};
}
</script>
</head>
<body>
<div>
<table>
<h2>QQ注册界面</h2>
<tr>
<td>昵称:</td>
<td id="nickname">
<input type="text" name="inputnick" id="inputNick" value=""/>
</td>
</tr>
<tr>
<td>性别:</td>
<td id="man">
<input type="checkbox" name="inputman" id="inputMan" value="男生"/>男生
<input type="checkbox" name="inputwomen" id="inputWomen" value="女生" />女生
</td>
</tr>
<tr>
<td>出生日期:</td>
<td id="birthday">
<input type="text" name="inputbirthday" id="inputBirthday" value="" />
</td>
</tr>
<tr>
<td>手机号码:</td>
<td id="phone">
<input type="text" name="inputphone" id="inputPhone" value="" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td id="code">
<input type="text" name="inputcode" id="inputCode" value=""/>
</td>
<td>
<button id="getRandCode">获取验证码</button>
</td>
</tr>
<tr>
<td>
<button class="word" name="return" id="return">
<a href="qqmodal.html">返回</a>
</button>
<button id="sure">
<a href="newqq.html">确认</a>
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
6.创建newpassword.html，文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var newpassword = document.getElementById("newpassword");
var surepassword = document.getElementById("surepassword");
var newpasslabel = document.getElementById("newpasslabel");
var passlabel = document.getElementById("passlabel");
//点击新密码编辑框
newpassword.onclick = function(){
var pa = newpassword.value;
//确认密码规则
var passwordReg = /^\w{6,}$/ig;
var reg = passwordReg.test(pa);
if(pa){
if(reg){
newpasslabel.innerHTML = "(^w^)";
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
};
//鼠标离开新密码编辑框
newpassword.onmouseout = function(){
var pa = newpassword.value;
//确认密码规则
var passwordReg = /^\w{6,}$/ig;
var reg = passwordReg.test(pa);
if(pa){
if(reg){
newpasslabel.innerHTML = "(^w^)";
}else{
newpasslabel.innerHTML = "(=_=)";
}
}else{
newpasslabel.innerHTML = "密码至少6位数";
}
};
//点击再次输入密码编辑框
surepassword.onclick = function(){
var repa = surepassword.value;
//确认密码规则
var passwordReg = /^\w{6,}$/ig;
var reg = passwordReg.test(repa);
if(repa){
if(reg){
passlabel.innerHTML = "(^w^)";
}else{
passlabel.innerHTML = "";
//alert("密码至少6位数");
}
}else{
passlabel.innerHTML = "";
}
};
//当鼠标离开确认密码编辑框
surepassword.onmouseout = function(){
var newpa = newpassword.value;
var surepa = surepassword.value;
if(newpa && surepa){
if(newpa == surepa){
passlabel.innerHTML = "(^w^)";
}else{
passlabel.innerHTML = "(=_=)";
}
}else{
passlabel.innerHTML = "";
}
};
//按下确认按钮
var sure = document.getElementById("sure");
sure.onclick = function(){
var flag = false;
var newpa = newpassword.value;
var surepa = surepassword.value;
if(newpa && surepa){
if(newpa == surepa){
localStorage.qqpassword = newpa;
flag = true;
}else{
alert("密码输入不同~~~");
}
}else{
alert("请输入密码~~~");
}
return(flag);
};
};
</script>
</head>
<body>
<div>
<h2>设置新密码</h2>
<table>
<tr>
<td>新密码:</td>
<td>
<input type="text" name="newpasswprd" id="newpassword" />
</td>
<td>
<label id="newpasslabel"></label>
</td>
</tr>
<tr>
<td>再次确认密码:</td>
<td>
<input type="text" name="surepassword" id="surepassword" />
</td>
<td>
<label id="passlabel"></label>
</td>
</tr>
<tr>
<td>
<button>
<a href="qqforget.html">返回</a>
</button>
<button id="sure">
<a href="passwordchange.html">确认</a>
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
将这6个文件放到一个文件夹里，然后打开第一个文件用浏览器运行，基本能实现QQ登录所有的功能。
用javascript制作简易的QQ登录网页相关推荐
- html实战例子: 简易的qq登录界面
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- JavaScript制作简易聊天窗口
前言 制作聊天窗口需要三部分代码:html代码.css样式.js代码 一.效果图 二.代码 1.js代码 代码如下(示例): <script type="text/javascript ...
- JavaScript 制作简易ATM机
里面现存有 100 块钱. 如果存钱,就用输入钱数加上先存的钱数, 之后弹出显示余额提示框 如果取钱,就减去取的钱数,之后弹出显示余额提示框 如果显示余额,就输出余额(如果存取了钱,余额也要变化) 如 ...
- 学生家乡网页设计作品静态HTML网页—— HTML+CSS+JavaScript制作辽宁沈阳家乡主题网页源码(11页)
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- Qt模拟简易版QQ登录页面及主页面
话不多说直接上图 需要源代码的私聊我(免费分享) QQ主页面(默认账号密码123) 登录失败对话框 (点击ok重新登录) 登录成功进度框(点击取消退出所以页面) QQ界面(等待登陆了成功后弹出) 下载 ...
- JavaScript制作简易单词测试题库
使用sessionStorage和localStorage制作一个英语单词题库 由于一共有三个页面 所以html代码和css代码只展示部分作参考 <div class="main&qu ...
- html js制作计算器,JavaScript制作简易计算器
.button { width: 55px; height: 20px; } 购物简易计算器 第一个数 第二个数 计算结果 var num_1=document.getElementById(&quo ...
- 如何用AXURE制作简单的QQ登录
一共有11个步骤,按顺序操作下去 1.我们进入Axure时,在左边找到元件库 2.然后从左边拖两个三级标题,输录文字 3.然后,我们再拖两个文本框,给第一个文本框添加提示文字,将文本框的类型设为Tex ...
- 每个人都能制作的简易版QQ音乐（HTML+CSS+JQuery）
自制系列二它来了. 如果在制作过程中有如何问题你都可以私信我,我会答复你的. 今天中秋节,首先祝大家中秋节快乐! 因为没什么礼物送给大家,所以在这里给大家安利一份简易版QQ音乐的制作,过程很简单,每个 ...
- 微信群控系统制作系列一——java模拟登录网页版微信
PS:很多人咨询我怎么做手机群控系统,因此我开了个制作群控系统的系列,准备分五期讲解群控系统的制作.前两篇是基础内容. 今天做个简单的java模拟登录网页版微信. 既然要做模拟登录,那么我们一定要了解 ...
最新文章
- python去重复元素_Python实现去除列表中重复元素的方法总结【7种方法】
- 近日的思绪（外三首）
- 如何通过js调用接口
- SQL 合并列值和拆分列值
- string的基本用法
- 开发一款高端大气上档次的android应用需要必备的知识——记于2013年末
- (zt)svn 随服务器启动
- Oracle10g数据库在AIX 5.3上的安装
- 解决Eclipse 鼠标悬停提示框是黑色的
- AjaxPro.Dll运用
- 软件工程第二篇博客（“相等”）
- java 重载的特征_Java中方法的重载详解
- 计算机日期函数公式大全,Excel技巧: 根据日期汇总月份的计算公式
- 步进电机驱动电路设计精华_电动机控制电路图讲解
- Java Document 工具类
- 给IT新人的15点建议
- HanLP中文分词、人名识别、地名识别
- uva11386 Triples
- 【Python+Appium】开展自动化测试（七）截图方法
- python matlab 普朗克公式黑体光谱辐射出射度 绘图