9.23學習內容

時間 2019-12-04
標籤 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>
1. 9.23 下午補充學習
2. 9.23
3. 學習內容
4. Linux學習內容
5. 9.28學習內容
6. js學習內容
7. SEO 學習內容
8. 7.29學習內容
9. Es6 學習內容
10. 待學習內容
更多相關文章...
• 您已經學習了 XQuery，接下來該學習什麼內容呢？ - XQuery 教程
• 您已經學習了 Web Services, 下一步學習什麼內容呢？ - Web Services 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。