代码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. STL 之 iterator traits 备忘

    //5种迭代器.为了激活重载机制,定义的5个类型.每种迭代器就是一个类型. struct input_iterator_tag{}; struct output_iterator_tag{}; str ...

  2. node18---Mongoose

    二.索引index 数据库中,根据一个字段的值,来寻找一个文档,是很常见的操作.比如根据学号来找一个学生. 这个学号,是唯一的,只要有学号,就能唯一确认一个学生的文档.学号这个属性,就非常适合建立索引 ...

  3. Handler.post与View.post的区别

    Android的线程分UI线程与非UI线程两类.而Handler是非UI线程向UI线程传递消息的桥梁. 除了非常常用sendMessage之外,Handler也提供了post(Runnable...) ...

  4. win10+ubuntu双系统卸载ubuntu

    进入win10下载EasyUEFI,删除ubuntu的引导项.重启如果直接进入了win10,表示卸载成功了.然后可以格式化ubuntu的分区.

  5. c语言运算符优先级与while循环案例

    sizeof可以获取数据类型的内存中的大小(字节) #include <stdio.h> #include <stdlib.h> // standared 标准 // inpu ...

  6. [Swift]数组(Array)最强解析

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. jq 方法函数（淡入淡出，查找元素，过滤）遍历

    淡入淡出:fadeIn fadeOut fadeToggle fadeTo 淡入:fadeIn(speed[,callback])   速度和回调函数 回调函数可以写匿名函数,或者方法名不加括号. s ...

  8. double int 类型的区别

    内部组织格式不同: po [NSString stringWithFormat:@"%d", f] 107886912 (lldb) po [NSString stringWith ...

  9. 关于深度残差网络（Deep residual network, ResNet）

    题外话: From <白话深度学习与TensorFlow> 深度残差网络: 深度残差网络的设计就是为了克服这种由于网络深度加深而产生的学习效率变低,准确率无法有效提升的问题(也称为网络退化 ...

  10. asp.net core 与EFcore 入门

    什么是EFcore? Entity Framework (EF) Core 是轻量化.可扩展和跨平台版的常用 Entity Framework 数据访问技术,EF Core 可用作对象关系映射程序 ( ...