代码indexhtml

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>TencentQQ</title>

		<meta name="viewport" content="width=device-width,initial-scale=1">

		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

		<script type="text/javascript" src="js/index.js" ></script>

	</head>

	<body>

		<!--登陆页面-->

		<div data-role="page" id="pageLogin">

			<div data-role="header">

				<h1 role="heading">Tencent办公系统</h1>

			</div>

			<div data-role="main" class="ui-content">

				<form method="get" action="">

					<div class="ui-field-contain">

						<label for="name">帐号:</label>

						<input type="text" name="u_name" id="u_name">

						<br/>

						<label for="password">密码:</label>

						<input type="password" name="u_password" id="u_password">

						<div style="margin-top: 20%;">

							<input type="button" value="登录" onclick="login()" />

							<a href="#pagetwo" data-role="button" data-transition="flip">注册</a>

						</div>

						<h5 style="color: red;">测试登录帐号：admin 密码：admin888</h5>

						<h5 style="color: red;">测试登录帐号：root 密码：123456</h5>

					</div>

				</form>

			</div>

			<div data-role="footer" style="text-align: center" data-position="fixed">

				<p>Copyright © 1998 - 2017 Tencent</p>

			</div>

		</div>

		<!--注册页面-->

		<div data-role="page" id="pagetwo" data-theme="b">

			<div data-role="header">

				<h1>欢迎注册Tencent</h1>

			</div>

			<div data-role="main" class="ui-content">

				<form method="get" action="">

					<div class="ui-field-contain">

						<label for="Rname">帐号:</label>

						<input type="text" name="u_name1" id="u_name1">

						<br/>

						<label for="Rpassword">密码:</label>

						<input type="password" name="u_password1" id="u_password1">

						<br/>

						<label for="Repassword">重复密码:</label>

						<input type="password" name="u_password2" id="u_password2">

						<div style="margin-top: 20%;">

							<input type="button" value="确定注册" onclick="register()" />

							<a href="#pageLogin" data-role="button" data-transition="flip" data-direction="reverse">返回</a>

						</div>

					</div>

				</form>

			</div>

			<div data-role="footer" style="text-align: center" data-position="fixed">

				<p>Copyright © 1998 - 2017 Tencent</p>

			</div>

		</div>

	</body>

</html>

　　index.js

//测试登录

function login() {

	var u_user = document.getElementById("u_name").value;

	var u_password = document.getElementById("u_password").value;

	if((u_user == "admin") && (u_password == "admin888")) {

		alert("登录成功！不作处理！");

	} else {

		alert("用户名或者密码错误，登录失败！");

		location.href = "index.html#pageLogin";

	}

}

//测试注册

function register() {

	var u_user1 = document.getElementById("u_name1").value;

	var u_password1 = document.getElementById("u_password1").value;

	var u_password2 = document.getElementById("u_password2").value;

	if((u_user1 == "root") && (u_password1 == "123456") && (u_password2 == u_password1)) {

		alert("注册成功！返回登录页面！");

		location.href = "index.html#pageLogin";

	} else {

		alert("注册失败，返回登录页面！");

		location.href = "index.html#pageLogin";

	}

}

　　

WebApp之H5登录注册的更多相关文章

  1. 用vue开发一个app（4，一个久等了的文章）H5直播平台登录注册（1）

    我上一篇关于vue的文章和这一篇时间隔了有点久了.最近终于写完了. 因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西.结合最近在项目中学到的经验和我的一点创意. 首先介绍下这是个什么! H ...

  2. h5博彩webapp项目实例|h5棋牌游戏|h5博彩app案例

    html5实现的博彩webapp.h5棋牌app实例,运用h5+css3+zepto+jQ+swiper+layer等技术进行布控开发,750px最大宽度适配手机端设备,采用flex+rem布局样式. ...

  3. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册

    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...

  4. 使用Struts2搭建登录注册示例

    使用Struts2来搭建mvc网站框架还是比较容易的,Struts2提供了各项辅助功能,保证了web开发的快速方便.下面使用struts2来搭建一个登录注册示例. 0 项目结构截图 1 搭建Strut ...

  5. SSM博客登录注册

    我的博客采用的是 spring+springmvc+mybatis框架,用maven和git管理项目,之后的其他功能还有待进一步的学习. 首先新建一个maven项目,我的项目组成大概就这样, 建立好项 ...

  6. Java Spring+Mysql+Mybatis 实现用户登录注册功能

    前言: 最近在学习Java的编程,前辈让我写一个包含数据库和前端的用户登录功能,通过看博客等我先是写了一个最基础的servlet+jsp,再到后来开始用maven进行编程,最终的完成版是一个 Spri ...

  7. 登录注册案例(Servlet+JSP+Maven)

    项目案例模板之登录注册的实现 案例演示 案例代码 设计表 pom.xml  <dependencies>  <dependency>    <groupId>jun ...

  8. Azure AD B2C（二）使用Azure AD B2C为ASP.NET Core 应用设置社交帐户（邮箱）登录/注册

    一,引言 上次关于Azure AD B2C 讲到一些概念,有介绍到,Azure AD B2C 也是一种身份验证的解决方案,但是它运行客户使用其首选的社交,企业或者本地账户标识对应用程序和API进行单一 ...

  9. web全栈开发之网站开发二（弹出式登录注册框前端实现-类腾讯）

    这次给大家分享的是目前很多网站中流行的弹出式登录框,如下面的腾讯网登录界面,采用弹出式登录的好处是大大提升了网站的用户体验和交互性,用户不用重新跳转到指定的页面就能登录,非常方便 先来个演示地址 要实 ...

随机推荐

  1. Wireshark默认不抓取本地包的解决方式

    事实上这个工具我已经用过非常多年了,还叫Ethereal的时候就在用. 今天因为实验须要,要抓一下在localhost间的包,结果发现获取不到.解决方法也非常easy,在cmd下输入: route a ...

  2. Android开发之视图动画基础

    Android的animation由四种类型组成 XML中  alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转 ...

  3. Get Client IP

    How to get a user's client IP address in ASP.NET? Often you will want to know the IP address of some ...

  4. 正睿NOIP赠送附加赛1

    T1:math 题目链接: http://zhengruioi.com/contest/156/problem/471 题解: 先讲讲我的乱搞做法.对于前面70%,我跑了背包.因为背包有后效性...我 ...

  5. ASP.NET 让ajax请求webform后台方法

    $.ajax({ type: "POST", url: ".aspx/getSubjectDirection", data: JSON.stringify({ ...

  6. Caffe学习--Layer分析

    Caffe_Layer 1.基本数据结构 //Layer层主要的的参数 LayerParamter layer_param_; // protobuf内的layer参数 vector<share ...

  7. POJ 3273 Monthly Expense 【二分答案】

    题意:给出n天的花费,需要将这n天的花费分成m组,使得每份的和尽量小,求出这个最小的和 看题目看了好久不懂题意,最后还是看了题解 二分答案,上界为这n天花费的总和,下界为这n天里面花费最多的那一天 如 ...

  8. C语言基础 (2) linux命令

    01.课程回顾 链接 ln 1.txt aaa.txt  硬链接 (两个相互独立 删除一个另外一个还在) ln -s 1.txt aaa.txt软连接 (后面的是快捷方式) 硬链接只能是文件,软连接可 ...

  9. luogu P1869 愚蠢的组合数（质因数+瞎搞）

    题意 n<=105 题解 一个数是不是偶数就是看有没有二这个质因子. 所以我们先预处理每个数的阶乘的二这个质因子的数量 然后按公式判断就行了. #include<iostream> ...

  10. 【BZOJ 1005】[HNOI2008]明明的烦恼(暴力化简法)

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1005 [题意] 中文题 [题解] 一棵节点上标有序号的树会和一个prufer数列唯一对 ...