深圳网站建设的基,电子商务的6种类型,群发软件,北京朝阳不限购小户型登录页面#xff1a; 功能说明#xff1a;登录页面是在页面模糊背景网站中找的素材加以修改成自己想要的登录界面#xff0c;我们老师让我们在登录时候加验证码#xff0c;看了大部分人用的是签名登录方式#xff0c;觉得没有什么特色因此设计了滑动登录#xff0c;把验证…登录页面 功能说明登录页面是在页面模糊背景网站中找的素材加以修改成自己想要的登录界面我们老师让我们在登录时候加验证码看了大部分人用的是签名登录方式觉得没有什么特色因此设计了滑动登录把验证和登录结合在一起。
滑动模板登录代码 特别说明因为采用的是滑动登录因此在用户输入完账户密码后不能通过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 classdrag_bg/divdiv classdrag_text onselectstartreturn false; unselectableon拖动滑块验证/divdiv classhandler 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 idff actionLoginServlet methodpost οnkeydοwnif(event.keyCode13){return false;}onkeydown事件是在用户按下
键盘时候触发event.keyCode中的值可以参考
event.keyCode用法详解博客文章登录页面Html代码 !DOCTYPE html
html langen classno-jsheadmeta charsetutf-8title登录页面/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0meta namedescription contentmeta nameauthor contentlink relstylesheet hrefbootstrap.min.csslink relstylesheet hrefassets/css/reset.csslink relstylesheet hrefassets/css/supersized.csslink relstylesheet hrefassets/css/style.csslink relstylesheet typetext/css hreftest/css/htmleaf-demo.csslink hreftest/css/drag.css relstylesheet typetext/css/script srcassets/js/jquery-1.8.2.min.js/scriptscript srcassets/js/supersized.3.2.7.min.js/scriptscript srcassets/js/supersized-init.js/scriptscript srcassets/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/headbodyscript typetext/javascript$(document).ready(function(){var $div$(#sub);$div.hide();
/* var $div1$(#drag);$div1.hide();$(#p).click(function(){$div1.show(500);}) */})/scriptdiv classpage-containerdiv classcontainerdiv classcontainerh1 stylecolor:black;DIY通讯录/h1form idff actionLoginServlet methodpost οnkeydοwnif(event.keyCode13){return false;}input typetext nameusername classusername placeholderUsernameinput typepassword idp namepassword classpassword οnclickf() placeholderPassworddiv iddrag/div button typesubmit stylebackground-color:#FFEBCD; idsub登录/buttonbutton stylebackground-color:#FFEBCD;font-color:black;οnclickjavascript:window.location.hrefzhuce.jsp注册/button /div/div/form/div script srchttp://www.jqhtml.com/jquery/jquery-1.10.2.js/scriptscriptwindow.jQuery || document.write(script srctest/js/jquery-1.11.0.min.js\/script)/scriptscript srctest/js/drag.js typetext/javascript/scriptscript typetext/javascript$(#drag).drag();/script/body
/html注册界面 界面设计用的是BootStrap其中用到的技术有JQuery、AJAX等注册时候通过AJAX对新用户输入的账户
进行动态验证其中城市选择器是在网上找的插件下载地址点击打开链接。
注册页面代码 % page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
title注册页面/title
link relstylesheet hrefbootstrap/bootstrap.min.css
style typetext/css.demo{width:220px;margin:50px auto;}.demo input{padding: 12px 18px;}
/style
!-- ajax异步通信动态验证账户 --
script typetext/javascriptvar xmlHttp;function createXMLHttp(){xmlHttpnew XMLHttpRequest(); }function f(id){createXMLHttp();xmlHttp.open(POST,FindUsername?idid);xmlHttp.onreadystatechangeshowMsgCallback;xmlHttp.send(null); }function showMsgCallback(){if(xmlHttp.readyState4){if(xmlHttp.status200){var textxmlHttp.responseText;if(textyes)document.getElementById(mark).innerHTML该账户可以注册;elsedocument.getElementById(mark).innerHTML该账户已被注册;}}}
/script
/head
body
div classcontianerdiv classrowdiv classcol-xs-6 col-xs-offset-3
form actionRegisterServletmethodpostdiv classform-groupbrlabel forsex性别/labelbrinput typeradio idsex nameman value男/男input typeradio idsex nameman value女/女/divdiv classform-grouplabel forusername账户/labelinput typetext classform-control nameusername οnblurf(this.value) idusername placeholderUsernamespan stylecolor:red;font-family:Times New Roman; idmark/span/divdiv classform-grouplabel forpassword密码/labelinput typepassword classform-control namepassword idpassword placeholderPassword/divdiv classform-grouplabel forname姓名/labelinput typetext classform-control namenameidname placeholderName/divdiv classform-grouplabel foremail1电子邮箱/labelinput typeemail classform-control nameemailidemail placeholderEmail/divdiv classform-grouplabel fortel电话号码/labelinput typetel classform-control nametelidtel placeholderTel/divdiv classform-grouplabel forcompany公司/labelinput typetext classform-control namecompanyidcompany placeholderCompany/divbutton typesubmit classbtn btn-primarySubmit/button/div/div
/form
/div
/body
/html还有很多css和js代码没有粘贴出来太多了希望给你们作为一个参考吧
