代码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. SQL语句将某字段查询出以逗号隔开

    MySQL的sql语句有好多能够省去server端的复杂处理 1.group_concat 这玩意儿能够实现  将一个字段如id查询出来   成为这种格式:121,122,123,124,125,12 ...

  2. 阿里云部署Docker(8)----安装和使用redmine

    安装redmine对过程进行管理. 须要说明的是:当你在docker images的时候,会说没连接到xxxx的时候,并且会提示用"docker -d".事实上这仅仅是把docke ...

  3. MongoDB(一)——简介

    这两天简单学习了一下MongoDB数据库,属于NoSQL类型数据库的一种,先简单宏观的看一下NoSQL的相关知识和MongoDB的基础知识. NoSQL是Not Only SQL的缩写,它指的是非关系 ...

  4. Redis 安装与简单示例 <第一篇>【转】

    一.Redis的安装 Redis下载地址如下:https://github.com/dmajkic/redis/downloads 解压后根据自己机器的实际情况选择32位或者64位.下载解压后图片如下 ...

  5. 向 wmware workstation pro 的 MS-DOS 操作系统中导入文件（masm debug edit）（详细图解）

    一般MS-DOS中不包含masm.debug和edit这三个程序. 我们想要把这几个文件导入到wmware workstation pro中的DOS虚拟机中怎么做呢? [尝试] 1.我试过用共享文件夹 ...

  6. AOJ GRL_1_B: Shortest Path - Single Source Shortest Path (Negative Edges) （Bellman-Frod算法求负圈和单源最短路径）

    题目链接: http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=GRL_1_B   Single Source Shortest Path ...

  7. 【原创】ApacheTomcat集群在Linux下的搭建步骤

    在RedHat5(以下简称RH)上搭建ApacheTomcat的集群环境,有以下步骤: 1.首先安装apr和apr-util apr-util需要依赖于apr包,所以先安装apr, http://fi ...

  8. ActiveMQ学习笔记（10）----ActiveMQ容错的连接

    1. Failover Protocol 前面讲述的都是Client配置连接到指定的broker上,但是,如果Broker的连接失败怎么办呢?此时,Client有两个选项:要么立刻死掉,要么连接到其他 ...

  9. NOIp2018模拟赛三十七

    奇怪的一场... 前两题都是全场题,C题明显不可做,我题目都没看懂...(STO lhx OTZ) 成绩:100+100+8=208 貌似十几个208的...A题暴力$O(nmc)$能过...暴力容斥 ...

  10. UVA-11584 Partitioning by Palindromes 动态规划 回文串的最少个数

    题目链接:https://cn.vjudge.net/problem/UVA-11584 题意 给一个字符串序列,问回文串的最少个数. 例:aaadbccb 分为aaa, d, bccb三份 n< ...