代码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. CSS3可伸缩框属性，可用于等分显示子元素或按比例显示子元素的大小

    使用方法跟Android的android:layout_weight属性类似.可类比Android中的使用方法.这样比較好记,因为眼下全部浏览器都不支持大部分的属性,所以全部的属性都须要加上Firef ...

  2. crm操作报价单实体

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Crm.Sdk.Messages;     using Microsoft ...

  3. elasticsearch的javaAPI之index

    Index API 原文:http://www.elasticsearch.org/guide/en/elasticsearch/client/java-api/current/index_.html ...

  4. web forms page和control的生命周期life cycle交互，以及page生命周期中每个event中需要做什么事情

    只有 page_load和page_init这些可以autoeventwireup RenderControl只提供override public override void RenderContro ...

  5. Ubuntu 18.04 关闭GUI

    在安装显卡驱动时, 可能需要关闭GUI, 在终端中输入: sudo service gdm3 stop

  6. ubuntu下创建文件夹快捷方式

    title: ubuntu下创建文件夹快捷方式 toc: false date: 2018-09-01 17:22:28 categories: methods tags: ubuntu 快捷方式 s ...

  7. yum概述配置

    YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...

  8. java高级——生产者消费者问题

    多线程是一个很重要的应用,本节讲述多线程中同步问题 public class ThreadDemo { public static void main(String[] args) { Resourc ...

  9. （转载） 据说年薪30万的Android程序员必须知道的

    据说年薪30万的Android程序员必须知道的帖子 标签: android 2015-03-12 16:52 28705人阅读 评论(14) 收藏 举报 Android中国开发精英 目前包括: And ...

  10. （转载）ExpandableListView 安卓二级菜单

    ExpandableListView 安卓二级菜单   ExpandableListView可以显示一个视图垂直滚动显示两级列表中的条目,这不同于列表视图(ListView).ExpandableLi ...