用javascript制作简易的QQ登录网页

最新推荐文章于 2021-10-01 17:45:30 发布

傻她你呀

最新推荐文章于 2021-10-01 17:45:30 发布

阅读量3.7k

点赞数 6

分类专栏： javascript 文章标签： javascript制作QQ 用js制作QQ 制作QQ登录界面制作QQ登录

本文链接：https://blog.csdn.net/qq_41672008/article/details/86608413

版权

这篇博客通过创建6个HTML文件展示了如何利用JavaScript实现一个简易的QQ登录、注册和修改密码的功能。包括账号密码验证、验证码获取及验证、新账号分配、密码设置和修改等步骤。用户可以通过交互式的登录界面进行操作，并通过本地存储来保存和验证用户信息。

摘要由CSDN通过智能技术生成

简易的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);