`

使用滑动条实现不同身份登录

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<style type="text/css">
/*<![CDATA[*/
* { width:100%; margin:0; padding:0;}
body { font-family: "宋体", Arial, Helvetica, sans-serif; font-size: 12px; color: #444; text-align:center;}
ul { list-style-type: none; margin:0; padding:0;}
a { color:#4e4e4e; text-decoration: none; vertical-align: middle;}
a:hover {color: #990000;}
a:visited {color: #4e4e4e;}

#login {width:186px;height:100px; border: 1px solid #d2d2d2; margin:100px auto;}
#login .top {margin-top:6px; margin-left:6px; width:60px; float:left;background:url(http://www.lanrentuku.com/images/uppic/200812291724020.gif) no-repeat -100px 6px; height:24px;}
#login h2 { font-size:12px; line-height:26px;text-align:left;text-indent: 21px;}
#moveico { margin-top:8px; background:url(http://www.lanrentuku.com/images/uppic/200812291724020.gif) no-repeat 12px -30px; width:110px; height:24px; float:left;}
#moveico div {position: relative;float:left;left:13px; top:4px;background:url(http://www.lanrentuku.com/images/uppic/200812291724020.gif) no-repeat -80px 0; width:12px; height:12px;}

#login input { height:16px; color:#666;}
#login .userchk { width:16px;}
#login .userinput { width:92px; border:1px #cbdca8 solid;}
#login .usersub { width:52px;height:18px; background:url(http://www.lanrentuku.com/images/uppic/200812291724020.gif) no-repeat; border:0;  line-height:22px; color:#454545; font-size:12px;}
#login span { margin-left:8px;}
#login ul {width:160px;margin:0 auto;}
#login li { clear:left; height:21px; line-height:21px; text-align:left;overflow:hidden;}
#login li.other {border-top:2px #e0ecc8 solid;  margin-top:3px;text-indent: 6px;}
#login a#loginhelp {position: relative; top:-18px;left:145px;display:block; width:12px; height:12px; background:#f7fcfc url(http://www.lanrentuku.com/images/uppic/200812291724020.gif) no-repeat -60px 0; }

/*]]>*/
</style>
<script type="text/javascript">
<!--

//Moveobj

function bind(o,ev,fn){
if (document.all)o.attachEvent('on'+ev,fn);
else o.addEventListener(ev,fn,false);
}
function setCookie(name,value,time){
var exp = new Date();
exp.setTime(exp.getTime() + 30*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}

function Move_autosetdef(moveobj){
var logintit = new Array("学生","家长","老师","管理员");
var bNum =13 ,mNum =22 , iNum = 4 , icolength = 6;
//分别 bNum 起始距离距moveobj内侧左部的长度 ,mNum 单位长度,iNum 单位数 0-1-2-3,icolength 图标距离的1/2。

var eNum = bNum + mNum * (iNum-1);
var $D = new Function('str','return document.getElementById(str);');
var $event = new Function('e','return (!e)?window.event:e;');
var checknowleft = function(z){return ((z<bNum)?bNum:((z>eNum)?eNum:(((z-bNum)%mNum>11)?z+mNum-(z-bNum)%mNum:z-(z-bNum)%mNum)));}
var nowseat = 0,drag_=false;
var Move_autoset = function(iNum){
$D(moveobj).getElementsByTagName("div")[0].style.left = iNum*mNum+bNum+"px";
$D("login-tit").innerHTML = logintit[iNum];
$D("login-type").value = iNum;//向hidden的login-type里添加参数值
} 

nowseat = (getCookie("nowseat")==null)?0:getCookie("nowseat");
Move_autoset(nowseat);
$D(moveobj).getElementsByTagName("div")[0].onmouseover = function(){
var x,y,z;
this.onmousedown=function(e){
drag_=true;
with(this){
var temp0=style.left.replace("px","")*1,temp1=offsetLeft,temp2=offsetTop;
x=$event(e).clientX;
y=$event(e).clientY;
z=temp0;
document.onmousemove=function(e){
//this.selection.empty();
if(!drag_)return false;
with(this){
z = temp0 + $event(e).clientX-x;
z = (z<bNum)?bNum:((z>eNum)?eNum:z);
style.left=z+"px";
}
}
document.onmouseup=function(e){
drag_ = false;
var nowleft = checknowleft(z);
nowseat = (nowleft-bNum)/mNum;
Move_autoset(nowseat);
setCookie('nowseat',(nowleft-bNum)/mNum);
}
}
}
}
$D(moveobj).onmouseover = function(){
this.onmousedown=function(e){
if(drag_)return false;
with(this){
var icoobj = getElementsByTagName("div")[0];
var temp0 = icoobj.offsetLeft;
var x=$event(e).clientX;
var nowleft = checknowleft(bNum+mNum*nowseat+(x-temp0)-icolength);
document.onmouseup=function(e){
nowseat = (nowleft-bNum)/mNum;
Move_autoset(nowseat);
setCookie('nowseat',(nowleft-bNum)/mNum);
}
}
}
}
}

bind(window,"load",new Function('Move_autosetdef("moveico")'));

//-->
</script>
 </head>

 <body>
<div id="login" class="Box">
   <form action="" method="post">
<div id="moveico"><div></div></div>
<div class="top"><h2 class="active" id="login-tit"></h2></div>
<input type="hidden" id="login-type" name="stype" value="0" />
<ul>
<li> <input name="" type="text" class="userinput" /><span><label for="isRemember"> <input name="isRemember" id="isRemember" type="checkbox" value="" class="userchk" /> 记住</label></span></li>
<li> <input name="" type="password" class="userinput" /><span><input name="" type="submit" value="登 陆"  class="usersub"/></span></li>
<li class="other"><a href="#3">忘记密码</a> | <a href="#3">注册/通行证</a><a href="#3" id="loginhelp"></a></li>
 </ul>
</form>
</div>
<br/>

 </body>
</html>
分享到:
评论

相关推荐

    pyqt5 滑动拼图验证

    2. **滑动条**:在PyQt5中,我们可以使用QSlider类来创建滑动条。滑动条将用于承载被切掉的图像块,并允许用户将其滑动到正确的位置。QSlider支持水平和垂直方向的滑动,可以设置范围、步长以及滑动事件的回调函数。...

    滑动图形行为验证码解锁

    总结来说,滑动图形行为验证码解锁是通过用户交互来验证人类身份的安全机制,Swift 提供了强大的工具来实现这一功能。从创建自定义视图到处理手势识别,再到错误处理和用户体验优化,每个环节都需要精心设计和实现。...

    验证码的简单实现C++

    在本案例中,我们讨论的是如何使用C++编程语言,特别是VC++中的MFC(Microsoft Foundation Classes)库来实现验证码的简单版本。 MFC是微软提供的一个面向对象的C++库,它封装了Windows API,使得开发者可以更容易...

    js实现滑动滑块验证登录

    本文将详细介绍如何使用JavaScript实现一个滑动滑块验证登录的功能。 首先,我们需要创建HTML结构。滑动滑块验证的基本元素包括一个背景层、一个可移动的滑块按钮以及相关的提示文字。以下是一个简单的HTML代码示例...

    Android自定义滑动验证条的示例代码

    今天,我们将介绍如何使用 SeekBar 实现自定义滑动验证条的示例代码。 SeekBar 的基本使用 SeekBar 是 Android 提供的一个控件,用于实现进度条的效果。我们可以通过设置 SeekBar 的属性来实现不同的效果。例如,...

    安卓微信相关相关-仿微信的滑动页面和消息查看的选择.rar

    考虑到微信是一个需要用户授权的应用,开发者需要实现微信登录接口,获取用户的OpenID和AccessToken,以便进行身份验证和服务调用。 总之,这个压缩包文件可能包含了一些实现这些功能的代码示例和资源,但可能需要...

    matlab 界面实现任意彩色 灰度图像放大缩小 任意角度旋转

    这需要使用MATLAB的图形对象和事件处理机制,例如创建按钮和滑动条来控制参数,以及回调函数来响应用户的操作。具体步骤包括设计GUI布局,定义控件属性,编写回调函数实现图像处理操作,并更新图像显示。 总的来说...

    asp.net实现验证码功能

    在这个特定的场景中,我们关注的是如何在ASP.NET中实现验证码功能,这是一种用于验证用户身份的安全机制,通常用于防止自动化程序(如机器人)进行恶意操作。 验证码在网页上通常表现为一串随机生成的图像文字,...

    验证码实现(随机背景色及字体颜色,带扰乱线条)

    可以使用`drawLine`方法在图像上绘制多条随机长度和方向的线条。 8. **保存图像**:将绘制好的图像保存为JPEG或PNG格式的文件,以便在网页上显示。 9. **返回验证码字符串**:同时返回生成的验证码字符串,供用户...

    Android简单音乐播放器

    登录界面通常包含输入框和按钮,用户输入信息后,通过网络请求验证用户身份。注册界面则需要收集新用户的信息,并将其保存到服务器或本地数据库。 2. **音乐播放功能**: 使用Android的MediaPlayer类是实现音频...

    登录控制和进度条实例代码ProgressBar

    - 可以是连续的,如滑动条,或分段的,如饼图。 2. **不确定性进度条**:也称为“活动指示器”,表示任务在进行但无法预知具体进度。常见于后台运算或网络请求。 - 常见的样式有旋转圆圈或水平填充,无明确数值...

    java地图标注,及显示

    这些操作通常会绑定到窗口的滑动条或按钮事件上。 在实际开发过程中,为了更好地管理与51地图的交互,可以创建一个专门的MapService类,封装所有的API调用和地图显示逻辑。这样,其他模块只需调用MapService的方法...

    个人页面登录3页.zip

    在IT行业中,构建一个个人页面登录系统是相当常见的任务,尤其对于网站或应用程序来说,它提供了用户管理和身份验证的关键功能。"个人页面登录3页.zip"这个文件很可能包含了一个简单的登录流程设计,通常包括三个...

    彩色验证码 源码(Java实现)

    验证码,全称是“验证字符图像”,是一种广泛用于网络安全的身份验证机制,它的目的是防止自动化的机器人或恶意软件进行非法操作。在本实例中,我们关注的是一个基于Java实现的彩色验证码源码。Java是一种跨平台的...

    IOS实现支付宝手势锁Demo

    在iOS开发中,实现支付宝手势锁功能是一项常见的需求,它为用户提供了一种便捷且安全的身份验证方式。本文将深入探讨如何在iOS应用中实现类似支付宝的手势锁功能,并结合提供的"手势锁"压缩包文件,解析其核心概念和...

    模拟的王者荣耀登陆和跳转界面

    1. **控件理解**:在软件开发中,控件是指能够被用户操作或显示信息的图形元素,如按钮、文本框、滑动条等。在王者荣耀的登录界面,常见的控件可能包括用户名输入框、密码输入框(通常为密文)、登录按钮、忘记密码...

    基于Qt聊天界面设计

    用户可以通过界面元素(如下拉菜单或滑动条)选择不同的字体设置,这些设置会实时应用到消息中。 4. **显示本地主机信息**:在Qt中,可以使用QHostInfo类获取本地主机的名称,通过QNetworkInterface类获取网络接口...

    swift-简单易用的手势密码实现

    当用户在视图上滑动手指时,手势识别器会发送一系列的触摸事件,我们可以通过监听这些事件来跟踪用户的绘制路径。 在`UIPanGestureRecognizer`的回调中,我们需要处理以下逻辑: 1. 计算触摸点相对于视图的坐标。 2...

    Android高级应用源码-android验证码的整个实现过程和所有的代码,功能比较的简单,大家可以好好参考学习一下.zip

    验证码在移动应用中扮演着重要的角色,它用于验证用户身份,防止恶意攻击,比如自动机器人或脚本。在这个Android项目中,我们将探讨如何实现一个简单的验证码功能,这对于Android开发者来说是一个有价值的实践案例。...

    电子-一种电动滑动门系统

    同时,还可以集成刷卡、指纹识别、面部识别等身份验证技术,实现门禁管理。 6. **维护与保养**:定期的维护和保养对电动滑动门的长期稳定运行至关重要,包括清洁门体、检查传感器灵敏度、润滑传动部件、测试安全...

Global site tag (gtag.js) - Google Analytics