web通讯录之登录注册界面

最新推荐文章于 2023-04-13 13:47:24 发布

成长的小牛233

最新推荐文章于 2023-04-13 13:47:24 发布

阅读量3.1k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/dreamzuora/article/details/79132207

版权

web 专栏收录该内容

87 篇文章

订阅专栏

登录页面：

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

滑动模板登录代码：

特别说明，因为采用的是滑动登录因此在用户输入完账户密码后不能通过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="该账户可以注册";
				else
					document.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代码没有粘贴出来太多了，希望给你们作为一个参考吧！