<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>微博-随时随地发现新鲜事</title>    <link rel="shortcut icon" href="imgs/WB_logo.png">    <style>        .login {            width: 1500px;            height: 900px;            background: #f2f2f5;            padding: 20px;            background: url("imgs/1.jpg") no-repeat center top;        }        .login_form {            width: 270px;            height: 190px;            padding: 0;            margin: 0 auto;            line-height: 50px;        }        .z_input,        .m_input {            height: 28px;            width: 250px;        }        .dl {            width: 250px;            height: 32px;            background-color: #f7671d;            border: 1px solid #f06923;        }        .dl:hover {            background: red;            cursor: pointer;        }        .login_span {            position: relative;            float: left;            right: -650px;            color: #808080;            font-size: 12px;            top: 70px;        }        .login a {            text-decoration: none;            color: #ee1100;            position: relative;            float: left;            left:700px;            top: 70px;            font-size: 12px;        }    </style></head><body>    <div class="login">        <div class="login_form">            账户：<input class="z_input" type="text" id="username"><br>            密码：<input class="m_input" type="password" id="password"><br>            <input class="dl" type="button" value="登录" onclick="f1()">        </div>        <span class="login_span">            还没有微博？        </span>        <a href="registe.html">            立即注册        </a>    </div></body></html><script>   var p1={      username:"张三",      password:"123"   };

   var p2={      username:"李四",      password:"1234"   };   var p3= {      username:"王昊",      password:"12345"   };   var array=[p1,p2,p3];   var str=JSON.stringify(array);   localStorage.setItem("login",str);   function  f1() {      //获取输入的账号      var userName=document.getElementById("username").value;      //获取输入的密码      var password=document.getElementById("password").value;      //取出来本地存储      var str=localStorage.getItem("login");      var array=JSON.parse(str);      //循环数组和输入的进行对比      var flag = true;      if (array[0] == ""){         alert("用户名不能为空，请重新输入！");      }      var users = localStorage.getItem("user");      var user_arr = JSON.parse(users);      // }      if (array[1] == "") {         alert("密码不能为空");         flag = false;      }      if (array[1] != user_arr[1]){         flag = false;         alert("密码不正确")      }      if (flag){         var cc=JSON.stringify(array);         localStorage.setItem("user",cc);      }   }</script>

js实现一个简单的登录页面的更多相关文章

  1. node.js 实现一个简单的登录拦截器

    拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. ...

  2. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

  3. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  4. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  5. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  6. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  7. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  8. tkinter做一个简单的登陆页面

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  9. tkinter做一个简单的登陆页面（十六）

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

随机推荐

  1. [持续交付实践] 研发协作平台：DevOps背景下的组织结构

    前言 今年以来做的事情越来越杂,负责的技术方向越来越广,精力越来越分散(创业公司的典型特点),编码的时间越来越少,有时候也会觉得很疲惫没办法专注一个事情. 除了技术方向上的实践,组织上如何组建一个最优 ...

  2. 关于SQLserver2008索引超出了数据

    由于公司只支持了2008.不支持2012的数据库.所以安装的2008.但在对表进行操作的时候出现如下异常: 这个问题是由于本地装的2008,但IT那边的测试机上面确装的2012.所以2008连接了20 ...

  3. Intellij IDEA常用快捷键介绍 Intellij IDEA快捷键大全汇总

    其他的快捷键还有很多,象Ctrl+G(跳转到指定行).Ctrl+F4(关闭当前编辑页面).Ctrl+F(搜索)等等,这些快捷键由于是各个编辑器都会提供的,而且定义的键位也都差不多,就没什么可说的了: ...

  4. Django12-ModelForm中创建局部钩子和全局钩子

    一.局部钩子 命名规则为clean_对象名称,例如上面定义了username.pwd对象,那么可以定义clean_username.clean_pwd的局部钩子进行规则校验 1.例子:定义一个手机号校 ...

  5. Matplotlib-多图合并显示

    Subplot 多合一显示 均匀图中图 不均匀图中图 # 均匀图中图 # matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使用到的方法叫作 subplot. # 使用impor ...

  6. Python re.findall函数不能匹配但是notepad++能匹配

    我使用同样的表达式匹配同样的网页源码,在notepad++里面不能直接使用,需要将内容都弄到同一行中. 但是我使用 requests.get(self.url).content.decode('UTF ...

  7. Debian 安装 virtualbox

    首先增加源: echo "deb http://download.virtualbox.org/virtualbox/debian stretch contrib" > /e ...

  8. cuda 配置要点

    1. 安装驱动 :sudo apt-get install nvidia- 2. 安装cuda : cuda 文件中包含驱动程序,因此在安装过程中当被问及是否安装驱动时,选择no 3. 安装cudnn ...

  9. CentOS6.3上安装与配置nginx+php+mysql环境

    1. 目前nginx采用是源码包安装的方式(yum安装失败),下载地址:http://nginx.org/en/download.html 我这里的安装包是:nginx-1.12.0.tar.gz 2 ...

  10. 网上Java总结

    1.         编译 javac 文件名.java 运行 java 文件名 2.         Public class 和 class 声明类的区别:public 声明的文件名必须和其类名一 ...