Android 程序員搞 web 之 webApi （十 四）

一、BOM

1、基礎(chǔ)知識(shí)

瀏覽器中的頂級(jí)對(duì)象：window ；
頁面中的的頂級(jí)對(duì)象：document ；
頁面中的對(duì)象都是 瀏覽器的，頁面的內(nèi)容也都是 window 的 ；

2、系統(tǒng)對(duì)話框

alter () 確定對(duì)話框；
prompt （） 輸入對(duì)話框 ；
confirm（） 確定取消對(duì)話框；
工作中的對(duì)話框 都是自己制作的。

3、onload 事件

如下方式書寫，可以將 js 邏輯寫在 head 標(biāo)簽內(nèi)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload = function () {
            document.getElementById("btn").onclick = function () {
                alert("上層調(diào)用")
            }
        }
    </script>
</head>

4、onunload 事件---頁面關(guān)閉之后的事件

  <script>
        onunload = function () {
            document.getElementById("btn").onclick = function () {
                alert("上層調(diào)用")
            }
        }
    </script>

5、onbeforeunload 事件 ---頁面打開前事件

 <script>
        onbeforeunload = function () {
            // document.getElementById("btn").onclick = function () {
            alert("上層調(diào)用")
            // }
        }
    </script>

6、location 對(duì)象

location . href= "鏈接地址" ； //屬性 可以加載 引號(hào)內(nèi)的鏈接
location . assign("鏈接地址") ; //方法 可以加載引號(hào)內(nèi)的鏈接

以上兩個(gè)的實(shí)現(xiàn)效果一樣
location . reload () ; //刷新界面
location . replace("鏈接地址"); //對(duì)當(dāng)前界面進(jìn)行替換，沒有返回鍵

7、history 對(duì)象

window . history . back(); //后退
window . history.forward(); //前進(jìn)
window . history .go() ; //go（）函數(shù)內(nèi)的參數(shù)為 負(fù)值 是后退，為 正值 則是前進(jìn)；

8、navigator

window . navigator . platform ; // 獲取瀏覽器所在的系統(tǒng)平臺(tái)類型 ；

9、定時(shí)器

創(chuàng)建定時(shí)器
<script>
    setInterval(function () {
        alert("計(jì)算器")
    }, 2000);
</script>

每隔兩秒 彈出一次彈窗。

停止定時(shí)器
<script>
    var timeId = setInterval(function () {
        alert("計(jì)算器")
    }, 2000);


    //點(diǎn)擊按鈕關(guān)閉定時(shí)器
    document.getElementById("btn").onclick = function () {
        window.clearInterval(timeId);
    }

</script>

10、一次性的定時(shí)器

<script>
    //開啟一個(gè)定時(shí)器
    var timeId = setTimeout(function () {
        alert("彈窗測(cè)試")
    }, 2000);


    //關(guān)閉定時(shí)器
    getView$("btn").onclick = function () {
        clearTimeout(timeId);
    }
</script>

雖然是一次性 ，但是需要進(jìn)行清理 ，否則會(huì)占用內(nèi)存。

案例
定時(shí)器效果

<body>
<label for="text">
</label>
<textarea name="textarea" id="text" cols="30" rows="10">
你注冊(cè)呀
</textarea>
<input type="button" id="btn" value="請(qǐng)閱讀協(xié)議(5)" disabled="disabled">
<script src="JsDemoOne.js"></script>
<script>
    var time = 5;
    var btn = getView$("btn");

    var timeId = setInterval(function () {
        time--;

        btn.value = "請(qǐng)閱讀協(xié)議(" + time + ")";
        if (time === 0) {
            btn.value = "同意";
            f1();
        }
    }, 1000);


    function f1() {
        clearInterval(timeId);
        btn.disabled = false;
    }


    btn.onclick = function () {
        alert("您已經(jīng)同意協(xié)議，請(qǐng)接受霸王條款")
    };

</script>

11、div 漸變

<body>
<div id="dv"></div>

<input type="button" id="btn" value="開始">
<script src="JsDemoOne.js"></script>
<script>
    var op = 10;
    getView$("btn").onclick = function () {

        var timeId = setInterval(function () {
            op--;
            getView$("dv").style.opacity = op / 10;
            if (op === 0) {
                clearInterval(timeId);
            }
            console.log(op);
        }, 1000);
    }
</script>
</body>

二、練習(xí)--輪播圖

輪播圖效果

輪播圖源碼

三、offset 系列

1、獲取元素即控件的尺寸

獲取結(jié)果為 number 類型；
獲取寬：offsetWidth
獲取高：offsetHeight
獲取距離上瀏覽器邊界距離：offsetTop
獲取距離左瀏覽器邊界距離：offsetLeft

2、注意

1）、當(dāng)控件在文檔流內(nèi)時(shí)：自己的位置是，自己相當(dāng)于 瀏覽器的絕對(duì)位置的距離 即：父級(jí)控件位置+父級(jí)控件margin+父級(jí)控件padding+自己margin；
2）、控件脫離文檔流時(shí)：自己位置是 自己相對(duì)于父級(jí)控件的位置 即：自己的位置（left、top什么的）+自己的 margin；

3、獲取系統(tǒng)指定標(biāo)簽

1）、獲取 body

document.body;

2)、獲取 title

document.title;

3)、獲取 html

document.documElement;

四、scroll 系列

scrollWidth：元素中內(nèi)容的實(shí)際寬（沒有邊框），如果沒有內(nèi)容就是元素的寬；
scrollHeight：元素中內(nèi)容的實(shí)際高(沒有邊框)，如果沒有內(nèi)容就是元素的高；
scrollTop：元素向上卷曲的距離；
scrollLeft：元素向左卷曲的距離；

封裝瀏覽器頁面向上滑動(dòng)距離和向左滑動(dòng)距離函數(shù)

   /**
     * 獲取瀏覽器頁面滑動(dòng)距離
     * @returns {{top: number, left: number}} top為向上滑動(dòng)距離，left為向左滑動(dòng)距離
     */
    function getScroll() {
        return {
            top: window.pageYOffset || document.documentElement.offsetTop
                || document.body.offsetTop || 0,
            left: window.pageXOffset || document.documentElement.offsetLeft
                || document.body.offsetLeft || 0
        };
    }

五、獲取任意元素任意樣式屬性的值

/**
     *獲取任意屬性的值
     * @param element 元素對(duì)象
     * @param attr 屬性
     * @returns {any} 所需值
     */
    function getStyle(element, attr) {

        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] :
            element.currentStyle[attr];
    }

六、 改變?nèi)我庠氐娜我鈱傩?/h3> 
  /**
     *改變?nèi)我庠氐娜我鈱傩詣?dòng)畫
     * @param element 元素對(duì)象
     * @param json json類型的屬性 例如  {"width": 900, "height": 400}
     */
    function animation(element, json) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var flag = true;
            for (var attr in json) {
                var current = parseInt(getStyle(element, attr));
                var target = json[attr];
                //變換數(shù)值
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current + "px";
                if (current !== target) {
                    flag = false;
                }
            }

            //到達(dá)指定數(shù)值
            if (flag) {
                clearInterval(element.timeId);
            }
            console.log("目標(biāo)：" + target + "，當(dāng)前：" + current + "，變化的數(shù)據(jù)：" + step);
        }, 20)
    }

    /**
     *獲取任意屬性的值
     * @param element 元素對(duì)象
     * @param attr 屬性
     * @returns {any} 所需值
     */
    function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] :
            element.currentStyle[attr];
    }

七、改變?nèi)我庠厝我鈱傩?，并添加回調(diào)函數(shù)，實(shí)現(xiàn)持續(xù)動(dòng)畫

   /**
     *改變?nèi)我庠氐娜我鈱傩詣?dòng)畫
     * @param element 元素對(duì)象
     * @param json json類型的屬性 例如  {"width": 900, "height": 400}
     */
    function animation(element, json, fn) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var flag = true;
            for (var attr in json) {
                var current = parseInt(getStyle(element, attr));
                var target = json[attr];
                //變換數(shù)值
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current + "px";
                if (current !== target) {
                    flag = false;
                }
            }

            //到達(dá)指定數(shù)值
            if (flag) {
                clearInterval(element.timeId);
                if (fn) {
                    fn();
                }
            }
            console.log("目標(biāo)：" + target + "，當(dāng)前：" + current + "，變化的數(shù)據(jù)：" + step);
        }, 20)
    }


    /**
     *獲取任意屬性的值
     * @param element 元素對(duì)象
     * @param attr 屬性
     * @returns {any} 所需值
     */
    function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] :
            element.currentStyle[attr];
    }
    //展示效果
    getId$("btn").onclick = function () {
        var json1 = {"width": 900, "height": 400};
        animation(getId$("dv"), json1, function () {
            var json2 = {"width": 90, "height": 40};
            animation(getId$("dv"), json2, function () {
                animation(getId$("dv"), json1, function () {
                    animation(getId$("dv"), json2, function () {

                    })
                })
            })
        })
    };

實(shí)現(xiàn)效果


實(shí)現(xiàn)效果

八、client 系列 表示 可視區(qū)域

clientWidth：可視區(qū)域?qū)挾? 沒有邊框 邊框內(nèi)部的區(qū)域；
clientHeight：可視區(qū)域高度 沒有邊框 邊框內(nèi)部區(qū)域；
clientLeft：左邊邊框的寬度

九、小知識(shí)點(diǎn)

1、獲取瀏覽器可是界面任意坐標(biāo)點(diǎn)
   /**
     * 獲取瀏覽器任意界面的 點(diǎn)坐標(biāo)
     * 
     *   ev = window.event || ev; 用于適配ie 8
     * 
     * @param ev 針對(duì)于google瀏覽器和 火狐瀏覽器的參數(shù)
     *
     */
    document.onmouseover = function (ev) {
        ev = window.event || ev;
        getId$("ts").style.left = ev.clientX  + "px";
        getId$("ts").style.top = ev.clientY  + "px";
        console.log(ev)
    }
2、任何瀏覽器獲取 鼠標(biāo)位置

    /**
     * 獲取任意瀏覽器的 鼠標(biāo)任意位置坐標(biāo)
     * @type {{getEvent: (function(*): Event | *), getPageY: (function(*=): any), getScrollTop: (function(): number), getPageX: (function(*=): any), getEventY: (function(*=): number), getScrollLeft: (function(): number), getEventX: (function(*=): number)}}
     */
    var evt = {
        getEvent: function (e) {

            return window.event || e;
        },
        //可視區(qū)域 橫坐標(biāo) 位置
        getEventX: function (e) {
            return this.getEvent(e).clientX;
        },
        //可視區(qū)域 縱坐標(biāo) 位置
        getEventY: function (e) {
            return this.getEvent(e).clientY;
        },
        //頁面向左卷曲的橫坐標(biāo)
        getScrollLeft: function () {
            return window.pageXOffset || document.body.scrollLeft
                || document.documentElement.offsetLeft || 0;
        },
        //頁面向上卷曲的縱坐標(biāo)
        getScrollTop: function () {
            return window.pageYOffset || document.body.scrollTop
                || document.documentElement.offsetTop || 0;
        },
        //相對(duì)于頁面的橫坐標(biāo)
        getPageX: function (e) {
            return this.getEvent(e).pageX ? this.getEvent(e).pageX :
                this.getEventX(e) + this.getScrollLeft();
        },
        //相對(duì)于界面的縱坐標(biāo)
        getPageY: function (e) {
            return this.getEvent(e).pageY ? this.getEvent(e).pageY :
                this.getEventY(e) + this.getScrollTop();
        }
    };

    
    //使用樣例
    getId$("div").onmouseover=function(ev){
        getId$("div").style.left = evt.getPageX(ev);
    }
3、阻止瀏覽器默認(rèn)事件

ie 8 使用 return false；進(jìn)行阻止，
谷歌和火狐使用 e.preventDefault(); 進(jìn)行阻止。

4、阻止事件冒泡

ie8 使用 window.event.cancleBubble=true；
谷歌和火狐使用 e.stopPropagation();

5、元素隱藏的方式

（1）、元素.style.display="none";隱藏不占位
（2）、元素.style.visibility="hidden";隱藏占位
（3）、元素.style.opacity=0;隱藏占位
（4）、元素.style.height="0px";
元素.style.border="0px solid color"； 隱藏占位


歡迎關(guān)注.jpg
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容