9.23学习内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day7</title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
            padding: 0px;
            margin: 0px;
        }

        .login {
            width: 512px;
            position: absolute;
            border: #ebebeb solid 1px;
            height: 280px;
            left: 50%;
            right: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            margin-left: -250px;
            margin-top: 140px;
            display: none;
        }

        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }

        .login-input-content {
            margin-top: 20px;
        }

        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

        .login-bg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: #000000;
            filter: alpha(opacity=30);
            -moz-opacity: 0.3;
            -khtml-opacity: 0.3;
            opacity: 0.3;
            display: none;
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .login-button a {
            display: block;
        }

        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }

        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }

        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }


    </style>
</head>
<body>
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<script>
    /*
    每一个函数都有实际参数，在函数执行时存放在arguments这个类数组对象里。即使函数没有形参列表，在函数执行时arguments里仍然有内容，存放函数的基本信息
    对于事件处理函数，arguments里存有事件参数对象及其他信息，其中事件参数对象里存有事件的具体信息。
    * */
    function f1() {
        console.log(arguments);
    }

    f1();   //可以看到输出一个数组

    var btn1 = document.getElementById("btn1");
    btn1.onclick = function () {
        console.log(arguments);//实参对象，里面有这个事件处理函数的相关信息
        console.log(arguments[0]);//第一个元素就是事件参数对象，这里名字为mouseEvent，里面存放着这个事件的基本信息

    }

    var btn2 = document.getElementById("btn2");
    btn2.onclick = function (e) {
        console.log(arguments);
        console.log(arguments[0]);
        console.log(e); //也可以利用这种方法获得事件参数队象，即事件处理函数默认存在的一个形参
        console.log(window.event);//也可以用window.event获取事件参数对象
        var e = window.event || e;//最兼容写法
        console.log(e);
    }
</script>

<br>
<a href="http://www.baidu.com" id="a1">百度</a>
<script>
    /*
    * 阻止默认事件的方法：1.在事件处理函数中return false
    *                 2.利用事件参数对象里的preventDefault方法
    *                 3.超链接内部写入:href = "javascript:void(0)"表示该部分等待以后添加，这个超链接暂时不指向任何地址
    *                 4.锚点定位，常用#定位到页面顶部，用#id值 定位到id为该值的标签位置
    *                           还可以用name定位，在a中添加name属性值，也可以用#属性值定位到该位置,name定位只能针对a标签来定位，而对div等其他标签就不能起到定位作用。
    *
    * */
    var a = document.getElementById("a1");
    a.onclick = function (e) {
        console.log("ss");
        //return false;   //可以阻止超链接跳转
        e.preventDefault();//也可以阻止超链接跳转，IE8不支持
    }

</script>
<script>

    /*
    *
    *offset系列:
        offsetLeft:获取元素距离最左边的距离，自身的margin包括在内，不包括自身的border
        offsetTop:获取元素距离最上边的距离，自身的margin包括在内，不包括自身的border
        offsetWidth:获取元素的宽度，包括border及以内，不包括margin
        offsetHeight:获取元素的高度，包括border及以内，不包括margin
        offsetParent:获取元素的定位父级元素：　　
        如果元素fixed定位，得到null;　　
        元素没有fixed情况下如果元素所有的父级元素都没定位，得到body;
        元素没有fixed情况下，父级元素有定位，得到离他最近的有定位的父级元素
     scroll系列
        scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度，当滚动条向下拉时，内容往上走，获得的就是上面跑出盒子范围的那部分高度。滚动条向右拉同理
        scrollWidth和scrollHeight:获得元素的实际宽度和高度，在内容没有超出盒子时，获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。
        根据浏览器兼容性，scroll系列需要写出兼容代码：例如scrollTop:
        　　var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
     client系列
        clientTop和clientLeft：获得上边框和左边框的宽度。
        clientWidth和clientHeight:获取可视范围的宽度高度，即边框内部的，不包括border，包括padding.当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。
    *
    *
    * */
</script>
<input type="button" value="隐藏" id="btn3">
<div id =  "dv" style="width: 100px;height: 100px;border: 1px solid black; background-color: #4481ff;">  </div>
<span style = "display: inline-block;">观察</span>
<script>

    /*
    *  元素隐藏的不同方式：1.display:none;    -显示方式   不占位置
    *                  2.visibility:hidden; --可见性   占位置
    *                  3.style.opacity:0；   --透明度   占位置
    *                  4.style.height = 0; border = 0; --高度变成0,去除边框 占空位置（仍然存在一个高度为0的块级元素，导致后续行内元素会换行）
    *                  5.style.width = 0; border = 0;--宽度变0，去除边框 占空位置（仍然存在一个宽度为0的块级元素，导致后续行内元素会换行）
    *                  6.都变0        --占空位置（仍然存在一个大小为0的块级元素，导致后续行内元素换行）
    *
    *
    * */
 var btn3 = document.getElementById("btn3");
 var dv = document.getElementById("dv");
 btn3.addEventListener("click",function(){
     // dv.style.display = "none";
     // dv.style.visibility = "hidden";
     // dv.style.height = 0;
     // dv.style.border = 0;
     // dv.style.width = 0;
     // dv.style.border = 0;
     dv.style.height = 0;
     dv.style.width = 0;
     dv.style.border = 0;
 },false)

</script>


<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login">
    <div id="title" class="login-title">登录会员
        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
            <label>登录密码：</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div><!--登录框-->
<div id="bg" class="login-bg"></div><!--遮挡层-->
<!--可拖拽的窗体案例-->
<script>
    //点击显示登录框和遮挡层
    document.getElementById("link").onclick = function () {
        document.getElementById("login").style.display = "block";
        document.getElementById("bg").style.display = "block";
    };
    //点击关闭关闭登录框和遮挡层
    document.getElementById("closeBtn").onclick = function () {
        document.getElementById("login").style.display = "none";
        document.getElementById("bg").style.display = "none";
    };

    /*
    * 思路：实现拖拽移动：获取点击时鼠标距离框体边缘的距离x和y,
    * x = 鼠标点击时的clientX - 框体的offsetLeft
    * y = 鼠标点击时的clientY - 框体的offsetTop
    * 在移动过程中x,y不变
    * 在移动过程中鼠标的clientX和clientY变化，用这两个分别减去x和y即得到框体实时应该在的的Left和Top
    * */
    //鼠标点下去事件
    var login = document.getElementById("login");
    document.getElementById("title").onmousedown = function (e) {
        var x = e.clientX - login.offsetLeft;
        var y = e.clientY - login.offsetTop;
        //移动是在界面内发生,
        document.onmousemove = function (e) {
            var left = e.clientX - x;
            var top = e.clientY - y;
            login.style.left = left +250+ "px";
            login.style.top = top -140+ "px";
            //由于登录框有margin存在：margin-left: -250px;margin-top: 140px;
            //所以要另外抵消这个相对距离
        };
    };
    //鼠标抬起事件：清理移动事件
    document.getElementById("title").onmouseup = function () {
        document.onmousemove = null;
    };
</script>



</body>
</html>
猜你喜欢
