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

来源：互联网发布：网络电视费用多少钱编辑：程序博客网时间：2024/05/13 12:31

这个是实现在界面中可移动的登录界面，也可以说是注册界面，反正二者只是变换一下里面的基本内容而已，可以自己修改一下
这个是可移动的可爱动态登录、注册界面

<!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";            }

阅读全文

1 0