27
2017
09

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

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

<!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";
            }
上一篇:策略模式 下一篇:如何给屏幕添加pop全屏手势