注册页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <style>
  12.         * {
  14.             margin: 0;
  15.             padding: 0;
  16.         }
  18.         a {
  19.             text-decoration: none;
  20.         }
  22.         html {
  23.             width: 100%;
  24.             height: 100%;
  25.         }
  27.         body {
  28.             background: rgb(138, 245, 124);
  29.         }
  31.         .user {
  32.             width: 350px;
  33.             margin: 200px auto 0;
  34.             border: 1px #ccc solid;
  35.             border-radius: 5px;
  36.             background-color: rgb(252, 251, 246);
  37.             padding: 30px 0;
  38.             color: rgb(16, 17, 17)
  39.         }
  41.         .user div {
  42.             width: 300px;
  43.             margin: 25px auto;
  44.             display: flex;
  45.             justify-content: center;
  46.         }
  48.         input {
  49.             outline: 0;
  51.             font-size: 12px;
  53.         }
  55.         .username input,
  56.         .password input {
  57.             height: 20px;
  58.             width: 224px;
  59.             border: 1px rgb(148, 143, 143) solid;
  60.             padding: 5px;
  61.         }
  63.         .code input {
  64.             width: 100px;
  65.             height: 20px;
  66.             padding: 5px;
  67.             border: 1px rgb(148, 143, 143) solid;
  68.         }
  70.         .code .yzm {
  71.             display: block;
  72.             height: 20px;
  73.             width: 50px;
  74.             padding: 5px;
  75.             border: 1px rgb(148, 143, 143) solid;
  76.             margin: 0 10px;
  77.             background-color: #fff;
  78.             color: #ccc;
  79.             line-height: 20px;
  80.             text-align: center;
  81.             font-size: 8px;
  82.         }
  84.         .code button {
  85.             border: none;
  86.             outline: 0;
  87.             background-color: skyblue;
  88.             font-size: 14px;
  89.             font-weight: 100;
  90.             color: grey;
  91.             cursor: pointer;
  92.         }
  94.         .user .btn-group {
  95.             text-align: center;
  96.             margin-top: 50px;
  97.         }
  99.         .btn-group a {
  100.             height: 40px;
  101.             line-height: 40px;
  102.             width: 100px;
  103.             background-color: rgba(255, 105, 248, 0.425);
  104.             display: block;
  105.             text-align: center;
  106.             border-radius: 5px;
  107.             border: none;
  108.             outline: 0;
  109.             cursor: pointer;
  110.             margin: 0 20px;
  111.             color: black;
  112.             font-size: 14px;
  113.         }
  114.     </style>
  115. </head>
  117. <body>
  118.     <div class="user">
  119.         <form>
  120.             <div class="username">
  121.                 <span>用户名：</span><input type="text" placeholder="以字母开头6-12位的数字和字母组合！" autocomplete="off">
  122.             </div>
  123.             <div class="password">
  124.                 <span>密码：&nbsp;&nbsp;&nbsp;</span><input type="password" placeholder="6-12位的字母和数组的组合！" autocomplete="off">
  125.             </div>
  126.         </form>
  127.         <div class="btn-group">
  128.             <a href="./record.html">登录</a>
  129.             <a onclick="login()" class="sign">注册</a>
  130.         </div>
  131.     </div>
  133.     <script>
  134.         function login() { //点击事件
  135.             var name = $('.username input').val() //获取用户名
  136.             var password = $('.password input').val() //获取密码
  137.             if (!name.match(/^[a-zA-Z][0-9a-zA-Z]{5,11}$/)) { //正则表达式
  138.                 alert('用户名只能是以字母开头6-12位的数字和字母组合')
  139.                 return
  140.             }
  141.             if (!password.match(/^[0-9a-zA-Z]{6,12}$/)) {
  142.                 alert('密码只能是6-12位的字母和数组的组合！')
  143.                 return
  144.             }
  145.             //方法1
  146.             // if (localStorage.getItem(name) == password) {
  147.             //     alert('用户名已注册')
  148.             // } else {
  149.             //     localStorage.setItem(name, password)
  150.             //     alert('注册成功')
  151.             //     window.location.href = './record.html'
  152.             // }
  153.             //方法2
  155.             let ani = JSON.parse(localStorage.getItem('账号')) //获取localStorage存储的数据
  156.             let admin = [] //声明一个数组
  157.             if (ani != null) { //如果获取到的localStorage存储的数据不为空，则证明之前有数据，把之前的数据添加进数组admin
  158.                 let flag = true
  159.                 for (var i = 0; i < ani.length; i++) { //遍历获取localStorage存储的数据
  160.                     if (ani[i].name == name) { //如果获取到localStorage存储的数据与输入的数据相同则弹出对话框，并跳出循环
  161.                         alert('用户名已被注册')
  162.                         flag = false
  163.                         break;
  164.                     } else {
  165.                         admin.push(item) //如果不相同，则把之前的数据添加到admin中
  166.                     }
  167.                 }
  169.                 admin.push({
  170.                     name: name,
  171.                     password: password
  172.                 }) //如果不相同，并把输入的数据也添加到admin中
  173.                 // console.log(admin)
  174.                 localStorage.setItem('账号', JSON.stringify(admin)) //重新存储到浏览器
  175.                 if (flag == true) {
  176.                     alert('注册成功')
  177.                     window.location.href = './record.html'
  178.                 }
  180.             } else { //如果获取localStorage存储的数据为空，则之前没有人注册则直接注册
  181.                 admin.push({
  182.                     name: name,
  183.                     password: password
  184.                 })
  185.                 localStorage.setItem('账号', JSON.stringify(admin))
  186.                 alert('注册成功')
  187.                 window.location.href = './record.html'
  188.             }
  189.         }
  190.     </script>
  191. </body>
  193. </html>

登陆页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <style>
  12.         * {
  14.             margin: 0;
  15.             padding: 0;
  16.         }
  18.         a {
  19.             text-decoration: none;
  20.         }
  22.         html {
  23.             width: 100%;
  24.             height: 100%;
  25.         }
  27.         body {
  28.             background: skyblue;
  29.         }
  31.         .user {
  32.             width: 350px;
  33.             margin: 200px auto 0;
  34.             border: 1px #ccc solid;
  35.             border-radius: 5px;
  36.             background-color: rgb(231, 240, 243);
  37.             padding: 30px 0;
  38.             color: rgb(13, 14, 13);
  39.         }
  41.         .user div {
  42.             width: 300px;
  43.             margin: 25px auto;
  44.             display: flex;
  45.             justify-content: center;
  46.         }
  48.         input {
  49.             outline: 0;
  51.             font-size: 12px;
  53.         }
  55.         .username input,
  56.         .password input {
  57.             height: 20px;
  58.             width: 224px;
  59.             border: 1px rgb(148, 143, 143) solid;
  60.             padding: 5px;
  61.         }
  63.         .code input {
  64.             width: 100px;
  65.             height: 20px;
  66.             padding: 5px;
  67.             border: 1px rgb(148, 143, 143) solid;
  68.         }
  70.         .code .yzm {
  71.             display: block;
  72.             height: 20px;
  73.             width: 50px;
  74.             padding: 5px;
  75.             border: 1px rgb(148, 143, 143) solid;
  76.             margin: 0 10px;
  77.             background-color: #fff;
  78.             color: #ccc;
  79.             line-height: 20px;
  80.             text-align: center;
  81.             font-size: 8px;
  82.         }
  84.         .code button {
  85.             border: none;
  86.             outline: 0;
  87.             background-color: skyblue;
  88.             font-size: 14px;
  89.             font-weight: 100;
  90.             color: grey;
  91.             cursor: pointer;
  92.         }
  94.         .user .btn-group {
  95.             text-align: center;
  96.             margin-top: 50px;
  97.         }
  99.         .btn-group a {
  100.             height: 40px;
  101.             width: 100px;
  102.             background-color: rgba(255, 105, 248, 0.425);
  103.             display: block;
  104.             text-align: center;
  105.             border-radius: 5px;
  106.             border: none;
  107.             outline: 0;
  108.             cursor: pointer;
  109.             margin: 0 20px;
  110.             color: black;
  111.             font-size: 14px;
  112.             line-height: 40px;
  113.         }
  115.         .noLand {
  116.             margin-left: 20px;
  117.             font-size: 12px;
  118.         }
  119.     </style>
  120. </head>
  122. <body>
  123.     <div class="user">
  124.         <form>
  125.             <div class="username">
  126.                 <span>用户名：</span><input type="text" placeholder="以字母开头6-12位的数字和字母组合！" autocomplete="off">
  127.             </div>
  128.             <div class="password">
  129.                 <span>密码：&nbsp;&nbsp;&nbsp;</span><input type="password" placeholder="6-12位的字母和数组的组合！" autocomplete="off">
  130.             </div>
  131.             <p class="noLand">
  132.                 <label for="male">
  133.                     <input type="checkbox" id="male" checked> 7天免登录
  134.                 </label>
  135.                 <!-- checked 利用checked来读取选项框被选中的状态 -->
  136.             </p>
  137.         </form>
  138.         <div class="btn-group">
  139.             <a onclick="register()">登录</a>
  140.             <a href="./register.html">注册</a>
  141.         </div>
  142.     </div>
  144.     <script>
  145.         let user = document.querySelector('.username input')
  146.         let psd = document.querySelector('.password input')
  147.         let male = document.getElementById('male')
  149.         function register() {
  150.             var name = $('.username input').val()
  151.             var password = $('.password input').val()
  152.             if (!name.match(/^[a-zA-Z][0-9a-zA-Z]{5,11}$/)) {
  153.                 alert('用户名只能是以字母开头6-12位的数字和字母组合')
  154.                 return
  155.             }
  156.             if (!password.match(/^[0-9a-zA-Z]{6,12}$/)) {
  157.                 alert('密码只能是6-12位的字母和数组的组合！')
  158.                 return
  159.             }
  160.             let ani = JSON.parse(localStorage.getItem('账号')) //取出浏览器数据
  161.             for (var i = 0; i < ani.length; i++) { //遍历数据
  162.                 if (ani[i].name == name && ani[i].password == password) { //如果获取localStorage存储的数据的与输入的数据相同则登录成功，否则登录失败
  163.                     let date = new Date() //设置新的事件
  164.                     date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000) //加上事件期限
  165.                     date1 = date.toGMTString() //转换成格林时间
  166.                     // console.log(ani[i].name)
  167.                     // console.log(ani[i].password)
  169.                     if (male.checked) { //如果7天免登陆为选中状态，则把localStorage的数据储存到cookie中
  170.                         document.cookie = "admin=" + ani[i].name + ";expires=" + date1
  171.                         document.cookie = "psw=" + ani[i].password + ";expires=" + date1
  172.                     }
  174.                     window.location.href = 'https://www.bootcdn.cn/'
  175.                     alert('登录成功')
  176.                 } else {
  177.                     alert('用户名或密码错误')
  178.                 }
  179.             }
  180.         }
  182.         window.onload = function() { //页面加载完毕自动运行
  183.             function gain() {
  184.                 if (document.cookie) { //如果cookie中有数据
  185.                     let lists = document.cookie.split(';')
  186.                     user.setAttribute('value', lists[0].split('=')[1])
  187.                     psd.setAttribute('value', lists[1].split('=')[1])
  188.                     register()
  189.                 }
  190.             }
  191.             gain()
  193.         }
  194.     </script>
  195. </body>
  197. </html>