web通讯录之登录注册界面

登录页面：

功能说明：登录页面是在页面模糊背景网站中找的素材加以修改成自己想要的登录界面，我们老师让我们在登录时候加验证码，看了大部分人用的是签名登录方式，觉得没有什么特色因此设计了滑动登录，把验证和登录结合在一起。

滑动模板登录代码：

特别说明，因为采用的是滑动登录因此在用户输入完账户密码后不能通过Enter键登录，因此要把按钮类型为submit加上一个监听事件把回车键屏蔽掉，当调用drag.js代码滑动置顶后在js代码中启用submit进行登录。

drag.js代码(滑动登录js代码):


(function($){$.fn.drag = function(options){var x, drag = this, isMove = false, defaults = {};var options = $.extend(defaults, options);//添加背景，文字，滑块var html = '<div class="drag_bg"></div>'+'<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+'<div class="handler handler_bg"></div>';this.append(html);var handler = drag.find('.handler');var drag_bg = drag.find('.drag_bg');var text = drag.find('.drag_text');var maxWidth = drag.width() - handler.width();  //能滑动的最大间距//鼠标按下时候的x轴的位置handler.mousedown(function(e){isMove = true;x = e.pageX - parseInt(handler.css('left'), 10);});//鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离$(document).mousemove(function(e){var _x = e.pageX - x;if(isMove){if(_x > 0 && _x <= maxWidth){handler.css({'left': _x});drag_bg.css({'width': _x});}else if(_x > maxWidth){  //鼠标指针移动距离达到最大时清空事件dragOk();}}}).mouseup(function(e){isMove = false;var _x = e.pageX - x;if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置handler.css({'left': 0});drag_bg.css({'width': 0});}});//清空事件function dragOk(){handler.removeClass('handler_bg').addClass('handler_ok_bg');//var $div=$("#sub");// $div.show(500);$("#ff").submit();//启用submit进行表单提交//document.formName.submit(); text.text('验证通过');drag.css({'color': '#fff'});handler.unbind('mousedown');$(document).unbind('mousemove');$(document).unbind('mouseup');}};
})(jQuery);

禁用回车键代码：

<form id="ff" action="LoginServlet" method="post" οnkeydοwn="if(event.keyCode==13){return false;}">

onkeydown事件是在用户按下键盘时候触发，event.keyCode中的值可以参考 event.keyCode用法详解博客文章

登录页面Html代码：

<!DOCTYPE html>
<html lang="en" class="no-js"><head><meta charset="utf-8"><title>登录页面</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="assets/css/reset.css"><link rel="stylesheet" href="assets/css/supersized.css"><link rel="stylesheet" href="assets/css/style.css"><link rel="stylesheet" type="text/css" href="test/css/htmleaf-demo.css"><link href="test/css/drag.css" rel="stylesheet" type="text/css"/><script src="assets/js/jquery-1.8.2.min.js"></script><script src="assets/js/supersized.3.2.7.min.js"></script><script src="assets/js/supersized-init.js"></script><script src="assets/js/scripts.js"></script>
<style>
body {background:url(../img/jian.jpg) no-repeat; font-family: 'PT Sans', Helvetica, Arial, sans-serif;text-align: center;color: #fff;
}
</style></head><body><script type="text/javascript">$(document).ready(function(){var $div=$("#sub");$div.hide();
/*     		var $div1=$("#drag");$div1.hide();$("#p").click(function(){$div1.show(500);}) */})</script><div class="page-container"><div class="container"><div class="container"><h1 style="color:black;">DIY通讯录</h1><form id="ff" action="LoginServlet" method="post" οnkeydοwn="if(event.keyCode==13){return false;}"><input type="text" name="username" class="username" placeholder="Username"><input type="password" id="p" name="password" class="password" οnclick="f()" placeholder="Password"><div id="drag"></div>	<button type="submit" style="background-color:#FFEBCD;" id="sub">登录</button><button style="background-color:#FFEBCD;font-color:black;"οnclick="javascript:window.location.href='zhuce.jsp'">注册</button>		</div></div></form></div>       <script src="http://www.jqhtml.com/jquery/jquery-1.10.2.js"></script><script>window.jQuery || document.write('<script src="test/js/jquery-1.11.0.min.js"><\/script>')</script><script src="test/js/drag.js" type="text/javascript"></script><script type="text/javascript">$('#drag').drag();</script></body>
</html>

注册界面：

界面设计用的是BootStrap，其中用到的技术有JQuery、AJAX等，注册时候通过AJAX对新用户输入的账户

进行动态验证，其中城市选择器是在网上找的插件，下载地址点击打开链接。

注册页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<style type="text/css">.demo{width:220px;margin:50px auto;}.demo input{padding: 12px 18px;}
</style>
<!-- ajax异步通信动态验证账户 -->
<script type="text/javascript">var xmlHttp;function createXMLHttp(){xmlHttp=new XMLHttpRequest();  }function f(id){createXMLHttp();xmlHttp.open("POST","FindUsername?id="+id);xmlHttp.onreadystatechange=showMsgCallback;xmlHttp.send(null);	}function showMsgCallback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var text=xmlHttp.responseText;if(text=="yes")document.getElementById("mark").innerHTML="该账户可以注册";elsedocument.getElementById("mark").innerHTML="该账户已被注册";}}} 
</script>
</head>
<body>
<div class="contianer"><div class="row"><div class="col-xs-6 col-xs-offset-3">
<form action="RegisterServlet"method="post"><div class="form-group"><br><label for="sex">性别</label><br><input type="radio" id="sex" name="man" value="男"/>男<input type="radio" id="sex" name="man" value="女"/>女</div><div class="form-group"><label for="username">账户</label><input type="text" class="form-control" name="username" οnblur="f(this.value)" id="username" placeholder="Username"><span style="color:red;font-family:Times New Roman;" id="mark"></span></div><div class="form-group"><label for="password">密码</label><input type="password" class="form-control" name="password" id="password" placeholder="Password"></div><div class="form-group"><label for="name">姓名</label><input type="text" class="form-control" name="name"id="name" placeholder="Name"></div><div class="form-group"><label for="email1">电子邮箱</label><input type="email" class="form-control" name="email"id="email" placeholder="Email"></div><div class="form-group"><label for="tel">电话号码</label><input type="tel" class="form-control" name="tel"id="tel" placeholder="Tel"></div><div class="form-group"><label for="company">公司</label><input type="text" class="form-control" name="company"id="company" placeholder="Company"></div><button type="submit" class="btn btn-primary">Submit</button></div></div>
</form>
</div>
</body>
</html>

还有很多css和js代码没有粘贴出来太多了，希望给你们作为一个参考吧！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/509873.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！