JavaScript基礎視頻教程總結（121-130章）

時間 2019-12-14
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>121-130章總結</title>
</head>
<body>
    
<pre> 121. 滾輪事件
onmousewheel鼠標滾輪滾動的事件，會在滾輪滾動時觸發，
可是火狐不支持該屬性
在火狐中須要使用 DOMMouseScroll 來綁定滾動事件
注意該事件須要經過addEventListener()函數來綁定
</pre>
<style type="text/css">
#glbox{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<div id="glbox"></div>
<script type="text/javascript">
    console.log("第121");
    var glbox = document.getElementById("glbox")
    glbox.onmousewheel = function(event){
        event = event||window.event
        //event.wheelDelta 能夠獲取鼠標滾輪滾動的方向
        //向上滾 120   向下滾 -120
        //wheelDelta這個值咱們不看大小，只看正負
        //alert( event.wheelDelta )
        //wheelDelta這個屬性火狐中不支持
        //在火狐中使用event.detail來獲取滾動的方向
        //向上滾 -3  向下滾 3
        //alert(event.detail);
        if ( event.wheelDelta > 0 || event.detail < 0) {
            if( this.clientHeight >10){
                this.style.height = this.clientHeight -10 + "px"
            }
        } else{
            this.style.height = this.clientHeight + 10 + "px"
        }
        /*
         * 使用 addEventListener()方法綁定響應函數，取消默認行爲時不能使用return false
         * 須要使用event來取消默認行爲event.preventDefault();
         * 可是IE8不支持event.preventDefault();這個玩意，若是直接調用會報錯
         */
        event.preventDefault && event.preventDefault();
        /*
         * 當滾輪滾動時，若是瀏覽器有滾動條，滾動條會隨之滾動，
         * 這是瀏覽器的默認行爲，若是不但願發生，則能夠取消默認行爲
         */
        return false;
    }
    
    //爲火狐綁定滾輪事件
    bind(glbox,"DOMMouseScroll",glbox.onmousewheel);

    function bind(obj , eventStr , callback){
        if(obj.addEventListener){
            obj.addEventListener(eventStr , callback , false);
        }else{
            obj.attachEvent("on"+eventStr , function(){
                callback.call(obj);
            });
        }
    }
</script>

<pre> 122. 鍵盤事件
onkeydown
- 按鍵被按下
- 對於onkeydown來講若是一直按着某個按鍵不鬆手，則事件會一直觸發
- 當onkeydown連續觸發時，第一次和第二次之間會間隔稍微長一點，其餘的會很是的快
這種設計是爲了防止誤操做的發生。
onkeyup
- 按鍵被鬆開
鍵盤事件通常都會綁定給一些能夠獲取到焦點的對象或者是document。
能夠經過keyCode來獲取按鍵的編碼
經過它能夠判斷哪一個按鍵被按下
除了 keyCode，事件對象中還提供了幾個屬性
altKey，ctrlKey，shiftKey
- 這個三個用來判斷alt ctrl 和 shift是否被按下，若是按下則返回true，不然返回false
</pre>
<div class="">
    <input type="" placeholder="不能輸入數字" />
</div>
<script type="text/javascript">
    console.log("第122");
    document.onkeydown = function(event){
        event = event || window.event
        var result = event.keyCode
            console.log("當前按下的按鍵值爲：" + result)
        if ( event.ctrlKey ){
            console.log("當前的按下的按鍵爲：Ctrl")
        }
        //判斷y和ctrl是否同時被按下
        if( event.keyCode === 89 && event.ctrlKey ){
            console.log("ctrl和y都被按下了");
        }
    }
    document.onkeyup = function(){
        console.log("按鍵鬆開了");
    }
    var input1 = document.getElementsByTagName("input")
    input1[0].onkeydown = function(event){
        event = event || window.event
        // 使文本框中不能輸入數字 48-57
        if( event.keyCode>=48 && event.keyCode <= 57 ){
            //在文本框中輸入內容，屬於onkeydown的默認行爲
            return false
        }
    }
    
</script>

<pre> 123. 鍵盤移動div </pre>
<style type="text/css">
#mvBox {height: 200px;position: relative;}
#movebox {width: 100px;height: 100px;background-color: #99FF99;position: absolute;}
</style>
<div id="mvBox">
    <div id="movebox"></div>
</div>

<script type="text/javascript">
    console.log("第123");
    //使div能夠根據不一樣的方向鍵向不一樣的方向移動
    var mvBox = document.getElementById("mvBox")
    var movebox = document.getElementById("movebox")
    // 左，上，右，下 37 38 39 40
    mvBox.onkeydown = function(event){
        event = event || window.event
        var speed = 10
        if(event.ctrlKey){
            speed = 50
        }
        switch(event.keyCode){
            case 37:
            movebox.style.left = movebox.offsetLeft - speed +"px"
            break
            case 38:
            movebox.style.top = movebox.offsetTop - speed +"px"
            break
            case 39:
            movebox.style.left = movebox.offsetLeft + speed +"px"
            break
            case 40:
            movebox.style.top = movebox.offsetTop + speed +"px"
            break
        }
    }
</script>

<pre> 124. BOM
- BOM可使咱們經過JS來操做瀏覽器
- 在BOM中爲咱們提供了一組對象，用來完成對瀏覽器的操做
- BOM對象
Window
- 表明的是整個瀏覽器的窗口，同時window也是網頁中的全局對象
Navigator
- 表明的當前瀏覽器的信息，經過該對象能夠來識別不一樣的瀏覽器
Location
- 表明當前瀏覽器的地址欄信息，經過Location能夠獲取地址欄信息，或者操做瀏覽器跳轉頁面
History
- 表明瀏覽器的歷史記錄，能夠經過該對象來操做瀏覽器的歷史記錄
因爲隱私緣由，該對象不能獲取到具體的歷史記錄，只能操做瀏覽器向前或向後翻頁
並且該操做只在當次訪問時有效
Screen
- 表明用戶的屏幕的信息，經過該對象能夠獲取到用戶的顯示器的相關的信息
這些BOM對象在瀏覽器中都是做爲window對象的屬性保存的，
能夠經過window對象來使用，也能夠直接使用。
Navigator
- 表明的當前瀏覽器的信息，經過該對象能夠來識別不一樣的瀏覽器
- 因爲歷史緣由，Navigator對象中的大部分屬性都已經不能幫助咱們識別瀏覽器了
- 通常咱們只會使用userAgent來判斷瀏覽器的信息，
userAgent是一個字符串，這個字符串中包含有用來描述瀏覽器信息的內容，不一樣的瀏覽器會有不一樣的 userAgent
</pre>
<script type="text/javascript">
    console.log("第124");
    
    console.log( Window )
    console.log( navigator )
    console.log( Location )
    console.log( History )
    console.log( Screen )
    
    var ua = navigator.userAgent
    console.log( ua )
    /*
     * 火狐的userAgent
     *  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
     * 
     * Chrome的userAgent
     *  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
     * 
     * IE8
     *  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
     * 
     * IE9
     *  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
     * 
     * IE10
     *  Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
     * 
     * IE11
     *  Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
     *  - 在IE11中已經將微軟和IE相關的標識都已經去除了，因此咱們基本已經不能經過UserAgent來識別一個瀏覽器是不是IE了
     */
    // alert(navigator.appName);
    if(/firefox/i.test(ua)){
        console.log("你是火狐！！！");
    }else if(/chrome/i.test(ua)){
        console.log("你是Chrome");
    }else if(/msie/i.test(ua)){
        console.log("你是IE瀏覽器~~~");
    }else if("ActiveXObject" in window){
        console.log("你是IE11，藏的好深啊~~~");
    }
    /*
     * 若是經過UserAgent不能判斷，還能夠經過一些瀏覽器中特有的對象，來判斷瀏覽器的信息
     * 好比：ActiveXObject
     */
    if("ActiveXObject" in window){
        console.log("你是IE，我已經抓住你了~~~");
    }else{
        console.log("你不是IE~~~");
    }
</script>

<pre> 125. History
- 對象能夠用來操做瀏覽器向前或向後翻頁
</pre>
<div class="">
    <h1>History</h1>
    <button id="htbtn">點我一下</button>
    <a href="111-120章總結.html" target="_blank">去111-120章總結</a>
</div>
<script type="text/javascript">
    console.log("第125");
    var htbtn =document.getElementById("htbtn")
    htbtn.onclick = function(){
        // length - 屬性，能夠獲取到當成訪問的連接數量
        var hl = history.length
        console.log(hl)
        // back() - 能夠用來回退到上一個頁面，做用和瀏覽器的回退按鈕同樣
        //history.back()
        // forward() - 能夠跳轉下一個頁面，做用和瀏覽器的前進按鈕同樣
        //history.forward()
        /*
         * go()
         *  - 能夠用來跳轉到指定的頁面
         *  - 它須要一個整數做爲參數
         *      1:表示向前跳轉一個頁面 至關於forward()
         *      2:表示向前跳轉兩個頁面
         *      -1:表示向後跳轉一個頁面
         *      -2:表示向後跳轉兩個頁面
         */
        history.go(-1)
    }
</script>

<pre> 126. Location
該對象中封裝了瀏覽器的地址欄的信息
</pre>
<div class="">
    <button id="ltbtn">點我一下</button>
</div>
<script type="text/javascript">
    console.log("第126");
    var ltbtn =document.getElementById("ltbtn")
    ltbtn.onclick = function(){
        // 若是直接打印location，則能夠獲取到地址欄的信息（當前頁面的完整路徑）
        console.log(location)
        // 若是直接將location屬性修改成一個完整的路徑，或相對路徑,則咱們頁面會自動跳轉到該路徑，而且會生成相應的歷史記錄
        // location = "http://www.baidu.com"
        // assign()- 用來跳轉到其餘的頁面，做用和直接修改location同樣
        // location.assign("http://www.baidu.com")
        // reload() - 用於從新加載當前頁面，做用和刷新按鈕同樣,若是在方法中傳遞一個true，做爲參數，則會強制清空緩存刷新頁面
        location.reload(true);
        // replace() - 可使用一個新的頁面替換當前頁面，調用完畢也會跳轉頁面,不會生成歷史記錄，不能使用回退按鈕回退
        // location.replace("http://www.baidu.com")
    }
</script>

<pre> 127. 定時器簡介
JS的程序的執行速度是很是很是快的,若是但願一段程序，能夠每間隔一段時間執行一次，可使用定時調用.
setInterval()
- 定時調用
- 能夠將一個函數，每隔一段時間執行一次
- 參數：
1.回調函數，該函數會每隔一段時間被調用一次
2.每次調用間隔的時間，單位是毫秒
- 返回值：
返回一個Number類型的數據
這個數字用來做爲定時器的惟一標識.
clearInterval()能夠用來關閉一個定時器
方法中須要一個定時器的標識做爲參數，這樣將關閉標識對應的定時器
</pre>

<div id="count"></div>
<script type="text/javascript">
    console.log("第127");
    var count =document.getElementById("count")
    var num = 1
    var timer = setInterval(function(){
        count.innerHTML = num++
        if( num==11 ){
            clearInterval(timer)
        }
    },1000)
</script>

<pre> 128. 切換圖片練習 </pre>
<div class="">
    <img id="img" src="images/1.jpg"/>
    <p>
        <button id="start" href="javascript:;">開始</button>
        <button id="stop" href="javascript:;">中止</button>
    </p>
</div>
<script type="text/javascript">
    console.log("第128");
    var img =document.getElementById("img")
    var start =document.getElementById("start")
    var stop =document.getElementById("stop")
    var imgArr = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]
    var index = 0
    var timer2 
    start.onclick = function(){
        /*
         * 目前，咱們每點擊一次按鈕，就會開啓一個定時器，
         *  點擊屢次就會開啓多個定時器，這就致使圖片的切換速度過快，
         *  而且咱們只能關閉最後一次開啓的定時器
         */
        //在開啓定時器以前，須要將當前元素上的其餘定時器關閉
        clearInterval(timer2)
        timer2 = setInterval(function(){
            index++
            index %= imgArr.length
            img.src = imgArr[index]
        },1000)
    }
    stop.onclick = function(){
        clearInterval(timer2)
    }
</script>

<pre> 129. 修改div移動練習 </pre>
<div id="editBox" style="height: 300px;position: relative;">
    <div id="editMove" style="position: absolute;height: 100px;width: 100px;background-color: #f00;"></div>
</div>
<script type="text/javascript">
    console.log("第129");
    var dir = 0
    var speed = 10
    var timer3
    var editBox = document.getElementById("editBox")
    var editMove = document.getElementById("editMove")
    timer3 = setInterval(function(){
        switch(dir){
            case 37:
                //alert("向左"); left值減少
                editMove.style.left = editMove.offsetLeft - speed + "px";
                break;
            case 39:
                //alert("向右");
                editMove.style.left = editMove.offsetLeft + speed + "px";
                break;
            case 38:
                //alert("向上");
                editMove.style.top = editMove.offsetTop - speed + "px";
                break;
            case 40:
                //alert("向下");
                editMove.style.top = editMove.offsetTop + speed + "px";
                break;
        }
    },30)
    editBox.onkeydown = function(event){
        event = event || window.event
        dir = event.keyCode
    }
    editBox.onkeyup = function(){
        dir=0
    }
    
</script>

<pre> 130. 延時調用
延時調用一個函數不立刻執行，而是隔一段時間之後在執行，並且只會執行一次.
延時調用和定時調用的區別，定時調用會執行屢次，而延時調用只會執行一次.
延時調用和定時調用其實是能夠互相代替的，在開發中能夠根據本身須要去選擇.
使用clearTimeout()來關閉一個延時調用
</pre>
<script type="text/javascript">
    console.log("第130");
    var ynum = 1
    var timer4 = setTimeout(function(){
        console.log(ynum++)
    },1000)
    clearTimeout(timer4)
</script>

</body>
</html>