admin管理员组文章数量:1633844
简易的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 >
<h2>QQ登录界面</h2>
<table >
<tr>
<td >QQ账号:</td>
<td >
<input type="text" name="account" />
</td>
</tr>
<tr>
<td >QQ密码:</td>
<td >
<input type="text" name="password" />
</td>
</tr>
<tr>
<td>
<button value="abc">
<a href="succeelogin.html">登录</a>
</button>
<button value="abc" >
<a href="qqlogin.html">注册</a>
</button>
<button 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);
本文标签： 简易网页JavaScriptqq
版权声明：本文标题：用javascript制作简易的QQ登录网页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729168958a1188415.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论