代码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. PHP的curl库代码使用

    欢迎訪问个人原创地址: http://www.phpthinking.com/archives/468 使用PHP的cURL库能够简单和有效地去抓网页. 你仅仅须要执行一个脚本.然后分析一下你所抓取的 ...

  2. LeetCode_Maximum Depth of Binary Tree

    一.题目 Maximum Depth of Binary Tree My Submissions Given a binary tree, find its maximum depth. The ma ...

  3. MongoDB数据模型和索引学习总结

    MongoDB数据模型和索引学习总结 1. MongoDB数据模型: MongoDB数据存储结构: MongoDB针对文档(大文件採用GridFS协议)採用BSON(binary json,採用二进制 ...

  4. android 处理Back键按下事件

    package com.example.keyevent; import android.os.Bundle; import android.view.KeyEvent; import android ...

  5. composer是什么

    composer是什么 Composer 是 PHP5.3以上 的一个依赖管理工具.它允许你声明项目所依赖的代码库,它会在你的项目中为你安装他们.Composer 不是一个包管理器.是的,它涉及 &q ...

  6. 解决JavaScript浮点数(小数) 运算出现Bug的方法

    解决JS浮点数(小数) 运算出现Bug的方法例如37.2 * 5.5 = 206.08 就直接用JS算了一个结果为: 204.60000000000002 怎么会这样, 两个只有一位小数的数字相乘, ...

  7. 乌班图 之 apt命令 及 VMware共享文件夹

    apt是Advanced Packaging Tool ,是Ubuntu下的一个安装包管理工具 大部分软件的安装.更新.卸载 都是利用apt命令来实现 直接在终端输入apt即可查阅命令的帮助信息 常用 ...

  8. C# AssemblyResolve事件可能不触发

    C# AssemblyResolve事件需要引用的dll的“复制本地”属性设置为False,如果为True,可能不会触发这个事件的处理函数. 我想设计一个自动加载分架构的C++/CLI的dll,用到了 ...

  9. 数组的常用方法 Array;

    数组: 1,arr.join();//返回默认由逗号隔开的一个字符串,传参则返回所传参数隔开的一个字符串; 2,arr.push();//往数组最后添加数据,返回新的数组的length,这个方法将改变 ...

  10. ES 新增字符串方法

    话不多说,直接开鲁 1. startsWith() 作用: 检测字符串以什么开头 实例: let str = "www.qjzzj.top"; console.log(str.st ...