js实现一个简单的登录页面
<!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实现一个简单的登录页面的更多相关文章
- node.js 实现一个简单的登录拦截器
拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. ...
- php+js实现一个简单的用户管理系统
php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- tkinter做一个简单的登陆页面
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- tkinter做一个简单的登陆页面(十六)
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
随机推荐
- 【亲测可用网上的不靠谱居多】一个完整的用canvas画内容然后保存到本地的例子
涉及好多个问题 比如保存到本地有黑色背景 怎么用把文字和图 画到画布上 腾讯的东西就是坑多了 直接上代码吧 啥也不说额 pic.wxml <view class='container'> ...
- log4j2 Filter用法详解
主要说下组合过滤器 CompositeFilter ,比较常用 <Filters> 是组合过滤器额标签,它包含的子标签是具体的过滤器,这三个具体过滤器分别是日志等级过滤器,正则表达式过滤器 ...
- 序列号多个input输入demo
<input class="inputs" type="text" maxlength="4" /> <input cla ...
- JS防抖与节流函数封装
防抖 在监听scroll事件的时候经常会用到防抖,当滚动到某一位置而触发状态,从而不会出现频繁滚动持续触发事件的情况 防抖的事件处理机制仅触发一次且必须是结束状态下才会执行 function debo ...
- 没有upcast 也不会发生多态
class A{ public: virtual void f(){ cout << "A::f()"<<endl;} }; class B:public ...
- python 打开文件基础 (笔记)
1.打开文件:建立文件与程序的关联 open(filenname,mode) filenname:文件名(包括路径):mode :打开模式 模式 打开模式 含义 r 只读,文件不存在则报错 w 只写, ...
- 常用的web服务器软件整理(win+linux)
(1)Apache Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上.Apache源于NCSAhttpd服务器,经过多次修改,成为世界上最流行的Web服务器 ...
- 面试常问MySQL性能优化问题
知识综述: [1] MySQL中锁的种类: 常见的表锁和行锁,也有Metadata Lock等等,表锁是对一整张表加锁,分为读锁和写锁,因为是锁住整张表,所以会导致并发能力下降,一般是做ddl处理时使 ...
- Python3 获取本机 IP
通过 UDP 获取本机 IP,没有任何的依赖,也没有去猜测机器上的网络设备信息,而且是利用 UDP 协议来实现的,生成一个UDP包,把自己的 IP 放如到 UDP 协议头中,然后从UDP包中获取本机的 ...
- (转)Thinkpad X1 Carbon 扩展硬盘
http://tieba.baidu.com/p/5837920925 网上看到有人成功利用X1C空闲的4G模块来实现了扩充用的是东芝RC100或者建兴的T11 其实难点应该是2242这种尺寸的SSD ...