您的位置：首页 > Web前端

web-前端之可移动的登录界面，并且可实现用户名重复的判断等表单事件

2017-09-26 15:44 471 查看
这个是实现在界面中可移动的登录界面，也可以说是注册界面，反正二者只是变换一下里面的基本内容而已，可以自己修改一下



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function mySub(){
var userName = document.forms['myForm']['userName'].value;
var pwd = document.forms['myForm']['pwd'].value;
var tel = document.forms['myForm']['tel'].value;
if(userName.length<3 || userName.length>6){
alert("用户名长度为3—6位");
return false;
}
if(pwd.length<6){
alert("密码必须大于6位");
return false;
}
return true;
}
</script>
<script type="text/javascript" src="js/login.js" ></script>
<style>
.form{
position: absolute;
border: 1px solid gainsboro;
width: 250px;
height: 300px;
text-align: center;
margin-top: 70px;
padding-top: 70px;
margin-left: 200px;
background-color: wheat;
opacity: 0.6;
cursor: move;
}
.yd img{
position: absolute;
/*border: 1px solid black;*/
width:250px;
height: 400px;
margin-top: 60px;
margin-left: 200px;
}
.yd{
position: absolute;
/*border: 1px solid black;*/
width: 250px;
height: 100px;

}

</style>
</head>
<body>

<div class="top"  >
<!--//可移动的div-->

<h1>用户注册</h1>
<span>规则：用户名长度为3—6字符</span>
<hr />
<div class="yd"  id="move_div">
<img src="img/timg (7).gif" />
<div class="form"  onmousedown="down()" onmousemove="move()" onmouseup="up()">

<form name="myForm", action="a.html" method="get" onsubmit="return mySub()">
<p>
用户名：<input name="userName" type="text" />
</p>
<p>
密码：<input name="pwd" type="password" />
</p>
<p>
电话：<input name="tel" type="text" />
</p>
<p>
<input type="reset" />
<input type="submit" />
</p>
</form>
</div>

</div>
</div>
</body>
</html>


//这里是js数据库代码
/*
* 分析：
* 获取鼠标实时移动的坐标；m_move_x,m_move_y
* 鼠标按下时的坐标；m_down_x,m_down_y
* div的坐标；dx,dy
* 鼠标按下时，鼠标与div的偏移量；md_x,md_y
* div的新坐标；ndx,ndy
*/

var isDown = false; //记录鼠标状态
var move_div; //要操作的div对象
var m_move_x, m_move_y, m_down_x, m_down_y, dx, dy, md_x, md_y, ndx, ndy;

//鼠标按下
function down() {
move_div = document.getElementById("move_div");
isDown = true;

//获取鼠标按下时坐标
m_down_x = event.pageX;
m_down_y = event.pageY;

//获取div坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;

//获取鼠标与div偏移量
md_x = m_down_x - dx;
md_y = m_down_y - dy;
}

//鼠标移动
function move() {
move_div = document.getElementById("move_div");
//实时更新div的坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;

//获取鼠标移动实时坐标
m_move_x = event.pageX;
m_move_y = event.pageY;

//鼠标按下时移动才触发
if(isDown) {

//获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量
ndx = m_move_x - md_x;
ndy = m_move_y - md_y;

//把新div坐标值赋给div对象
move_div.style.left = ndx + "px";
move_div.style.top = ndy + "px";

}

}

//鼠标释放
function up() {
isDown = false;
}
//声明全局变量
var user,pwd,backimg,move_div,min_div;

//当前文档加载完成后再执行
window.onload = function(){
user = document.getElementById("userName");
move_div = document.getElementById("move_div");
min_div = document.getElementById("min-div");
yinc = document.getElementById("yinc");
}

//显示登录窗口
function showLogin(){
move_div.style.display = "block";
yinc.style.display="none";

}

//登录窗口最小化
function minLogin(){
move_div.style.display = "none";
min_div.style.display = "block";
}

//登录窗口最大化
function maxLogin(){
move_div.style.display = "block";
min_div.style.display = "none";
}

//关闭窗口
function closeLogin(){
move_div.style.display = "none";
yinc.style.display="block";
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  界面 函数 移动 前端 表单
相关文章推荐
新的分享
章节导航