js实现登录注册功能

简介: 话不多说,上代码。登录功能

话不多说,上代码。

登录功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登陆</title>
    <style type="text/css">
      .deng {
        margin-left: 36%;
        margin-top: 200px;
      }
      div h3 {
        margin-left: 10%;
      }
      button {
        float: left;
        margin-top: -39px;
        margin-left: 215px;
      }
      #sub {
        float: left;
        margin-left: 280px;
        margin-top: -39px;
      }
    </style>
  </head>
  <body>
    <div class="deng">
      <h3>登录</h3>
      <p>账号:<input type="text" name="" id="zh" value=""></p>
      <p>密码:<input type="password" name="" id="mm" value=""></p>
      <button type="but()">登录</button>
      <input type="submit" id="sub" value="注册">
    </div>
    <script type="text/javascript">
      localStorage.setItem()
      let but = document.getElementsByTagName("button")[0];
      let data = localStorage.getItem('data') == null ? [] : JSON.parse(localStorage.getItem('data'));
      console.log(data);
      but.onclick = function() {
        let zh = document.getElementById("zh").value;
        let mm = document.getElementById("mm").value;
        if (zh == '' || mm == '') {
          alert("账号密码不能为空");
          return;
        }
        let state = -1;
        for (let i = 0; i < data.length; i++) {
          if (data[i].zhang == zh) {
            state = i;
          }
        }
        console.log(state);
        if (state < 0) {
          alert("账号不存在");
        } else {
          if (data[state].mima == mm) {
            alert("登录成功");
          } else {
            alert("密码错误");
          }
        }
      }
      sub.onclick();
    </script>
  </body>
</html>

注册功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
      .zui {
        margin-left: 36%;
        margin-top: 200px;
      }
      .yi {
        margin-left: 10%;
      }
      .er {
        margin-left: 10%;
      }
      button {
        float: left;
        margin-top: -40px;
        margin-left: 330px;
      }
    </style>
  </head>
  <body>
    <div class="zui">
      <div class="yi">
        <p>注册账号:<input type="zhang" value=""></p>
      </div>
      <div class="er">
        <p>密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="mmss" value=""></p>
      </div>
      <button type="button" class="but">注册</button>
    </div>
    <script type="text/javascript">
      let zhs = document.getElementsByTagName('input')[0];
      let mms = document.getElementsByTagName('input')[1];
      let but = document.getElementsByTagName('button')[0];
      but.onclick = function() {
        let zhss = zhs.value;
        console.log(zhss);
        let mmss = mms.value;
        console.log(mmss);
        let data = localStorage.getItem("data") == null? [] : JSON.parse(localStorage.getItem("data"));
        if(data == null){
          data= new Array();
        }else{
          data = JSON.parse(localStorage.getItem("data"));
        }
        let obj = {
          zhang: zhss,
          mima: mmss
        }
        data.push( obj )
        let str = JSON.stringify(data);
        localStorage.setItem("data", str);
      }
    </script>
  </body>
</html>
相关文章
|
20小时前
|
JSON 缓存 前端开发
JavaScript 新特性:新增声明命令与解构赋值的强大功能
JavaScript 新特性:新增声明命令与解构赋值的强大功能
|
3天前
|
SQL Web App开发 JavaScript
业务功能常用的JS代码片段
业务功能常用的JS代码片段
11 3
|
20小时前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
4天前
|
JavaScript 安全 前端开发
JS实现复制功能
JS实现复制功能
5 0
|
4天前
|
JavaScript 前端开发
JS分页功能
JS分页功能
4 0
|
5天前
|
JavaScript 前端开发
JS走马灯小功能制作
JS走马灯小功能制作
4 0
|
9天前
|
前端开发 JavaScript 算法
JavaScript制作简版计算器,提供加减乘除功能
JavaScript制作简版计算器,提供加减乘除功能
12 0
|
JavaScript 前端开发 Java
【JavaScript】注册事件
通过prototype可以给一个类动态的扩展函数和属性
173 0
【JavaScript】注册事件
|
JavaScript 前端开发
js中一次性注册多个事件
在js中,如果想一次性给一个控件或者标签初测多个事件的方法:          假如有个标签:                      现在要对这个input标签,同时注册失去焦点(blur)和按enter事件(e.
911 0
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
162 63