task0002（四）- 練習：數據處理、輪播及交互

時間  2019-12-08
標籤 task0002 task 練習 數據處理 交互 欄目 大數據 简体版
原文   原文鏈接

轉載自個人我的博客javascript

歡迎你們批評指正css

包括5部分：html

  • 小練習1-處理用戶輸入java

  • 小練習2-日期對象的使用git

  • 小練習3：輪播圖github

  • 小練習4：輸入提示框正則表達式

  • 小練習5：界面拖拽交互spring

源碼地址
task0002 在線Demo後端

小練習1：處理用戶輸入

這裏直接能夠利用原來寫過的util.js。因此應該不是特別難。主要考察對字符串的操做，以及正則表達式的使用數組

任務描述

在task0002目錄下建立一個task0002_1.html文件，以及一個js目錄和css目錄，在js目錄中建立task0002_1.js，並將以前寫的util.js也拷貝到js目錄下。而後完成如下需求。

第一階段

在頁面中，有一個單行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，容許用戶用半角逗號來做爲不一樣愛好的分隔。

當點擊按鈕時，把用戶輸入的興趣愛好，按照上面所說的分隔符分開後保存到一個數組，過濾掉空的、重複的愛好，在按鈕下方建立一個段落顯示處理後的愛好。

實現

根據題目要求，這個地方比較簡單，能夠直接利用前面寫過的一些函數，分紅四步，進行。

  1. 使用正則表達式來對字符串進行分割操做。

  2. uniqArray函數進行去重操做。

  3. for循環，trim函數對數組項進行去除首尾空格，用來處理，該項爲空的狀況。

  4. innerHTML進行輸出。

html：

<input type="text" id="user_input">
<button id="btn">提交</button>
<ul id="user_output"></ul>

task0002_1.js中的js:

//自執行的匿名函數
(function handle_1() {
    //其實這裏不必使用id由於數據那麼少$函數直接獲取標籤就行
    var inp = $("#user_input");
    var out = $("#user_output");
    $.click("#btn", function () {
        var value = inp.value.split(/\,|\，/); //1.根據半角逗號分割成數組。
        var unValue = uniqArray(value); //2.數組去重
        for (var i = 0, len = unValue.length; i < len; i++) {
            var trimValue = trim(unValue[i]); //3.對每一項進行去除首尾空格操做
            console.log(trimValue);
            if (trimValue !== "") { //4.只有在去除首尾空格後不爲空的數組才輸出。
                out.innerHTML += "<li>" + trimValue + "</li>"
            }
        }
    })
})();

第二階段

單行變成多行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，容許用戶用換行、空格（全角/半角）、逗號（全角/半角）、頓號、分號來做爲不一樣愛好的分隔。

當點擊按鈕時的行爲同上

實現

看題目描述，主要是對於第一步進行修改，第一階段只要求對半角逗號進行處理，可是在第二階段中，須要對「換行、空格（全角/半角）、逗號（全角/半角）、頓號、分號」進行處理。
主要是考察對於正則表達式的應用。

只須要對var value = inp.value.split(/\,|\，/); 進行更改以下：

var value = inp.value.split(/\n|\s+|\,|\，|\、|\;|\；/);
須要注意的是：在正則表達式進行匹配這些符號時最好是前面加上轉義字符。

第三階段

用戶輸入的愛好數量不能超過10個，也不能什麼都不輸入。當發生異常時，在按鈕上方顯示一段紅色的錯誤提示文字，而且不繼續執行後面的行爲；當輸入正確時，提示文字消失。

同時，當點擊按鈕時，再也不是輸出到一個段落，而是每個愛好輸出成爲一個checkbox，愛好內容做爲checkbox的label。

實現

  • 嗯，其實這裏按照題目要求應該要實時監聽輸入值變化，可是那樣太麻煩了，，因此就直接在點擊按鈕的時候判斷了。

  • 直接判斷數組長度就好了。。輸入爲空時，判斷字符串=「」。

  • 輸出checkbox這裏不過多的設置了，只是演示。

最終完成

html:

<textarea name="user_input" id="user_input" cols="45" rows="10"></textarea>
<br>
<button id="btn">處理並輸出</button>
<p>輸入的愛好數量不能超過10個，或什麼都不輸入</p>
<form id="user_output"></form>

js:

(function handle_1() {
    var inp = $("#user_input");
    var out = $("#user_output");
    $.click("#btn", function () {
        var value = inp.value.split(/\n|\s+|\,|\，|\、|\;|\；/); //分割成數組。
        var unValue = uniqArray(value); //數組去重
        var i = 0;
        var len = unValue.length;
        if (len > 10 || unValue == "") {
            $("p").style.disautoPlay = "block";
        } else {
            $("p").style.disautoPlay = "none";
            for (; i < len; i++) {
                var trimValue = trim(unValue[i]); //對每一項進行去除首尾空格操做
                console.log(trimValue);
                if (trimValue !== "") { //只有在去除首尾空格後不爲空的數組才輸出。
                    out.innerHTML += "<label>" + "<input type='checkbox'>" + trimValue + "</label>"
                }
            }
        }
    })
})();

在線演示：小練習1：處理興趣列表

小練習2：日期對象的使用

任務描述

在和上一任務同一目錄下面建立一個task0002_2.html文件，在js目錄中建立task0002_2.js，並在其中編碼，實現一個倒計時功能。

  • 界面首先有一個文本輸入框，容許按照特定的格式YYYY-MM-DD輸入年月日；

  • 輸入框旁有一個按鈕，點擊按鈕後，計算當前距離輸入的日期的00:00:00有多少時間差

  • 在頁面中顯示，距離YYYY年MM月DD日還有XX天XX小時XX分XX秒

  • 每一秒鐘更新倒計時上顯示的數

  • 若是時差爲0，則倒計時中止

實現思路

瞭解日期對象

這裏主要是考察的對於日期對象的使用。

new Date()。若是沒有輸入任何參數，則Date的構造器會依據系統設置的當前時間來建立一個Date對象。表示當前系統時間。

//時間對象建立的幾種方式。
var today = new Date();
var birthday = new Date("December 17, 1995 03:24:00");
var birthday = new Date("1995-12-17T03:24:00");
var birthday = new Date(1995,11,17);
var birthday = new Date(1995,11,17,3,24,0);

  • Date對象中處理時間和日期的經常使用方法：詳細內容在MDN上

日期對象經常使用方法

正式開始：

  1. 建立時間處理函數，使用正則表達式，處理輸入的值，value.match(/(^\d{4})-(\d{2})-(\d{2}$)/);用到了match方法和正則的分組，在我寫的正則博客裏應該有過詳細介紹了。這裏也不過的說明了。

  2. 使用目標時間的getTime()毫秒數減去獲得當前的毫秒數，獲得相差的毫秒數。處理它：（注意毫秒的問題）

    • (60 * 60 * 24) ：剩餘的天數。

    • (60 * 60) % 24) :剩餘的小時數。依次類推。

  3. innerHTML輸出，而且判斷相差時間，改變輸出的值。

  4. 定時器的使用。(我這裏使用的setTimeout()，使用遞歸調用實現自執行)

    • 計時器setTimeout(函數,延遲時間);，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。

  • 取消計時器:clearTimeout()中止計時器。

  • 給按鈕添加點擊事件，在點擊時，調用剛剛編寫的的時間處理函數。

    • 在線演示：小練習2：倒計時

    小練習3：輪播圖組件

    任務描述

    在和上一任務同一目錄下面建立一個task0002_3.html文件，在js目錄中建立task0002_3.js，並在其中編碼，實現一個輪播圖的功能。

    • 圖片數量及URL均在HTML中寫好

    • 能夠配置輪播的順序（正序、逆序）、是否循環、間隔時長

    • 圖片切換的動畫要流暢

    • 在輪播圖下方自動生成對應圖片的小點，點擊小點，輪播圖自動動畫切換到對應的圖片

    效果示例：http://echarts.baidu.com/ 上面的輪播圖（不須要作左右兩個箭頭）

    實現思路:

    主要是對於考察對於定時器，以及事件綁定的處理，以及動畫效果，爲此我專門寫了一篇博客《JS完美運動框架的封裝過程》。 這裏就直接使用裏面封裝好的函數了。

    原本都要放棄組件的編寫了，只想按照常規方法來寫個輪播圖就好，可是在先把小練習4完成的狀況下，就發現了一種新方法，能夠幫助我完成這個任務（強烈建議先看小練習四！）使用nextElementNode,圖片向左切換。（不涉及任何css，我假設css都會了，也沒有用到特別難css屬性）

    該輪播圖有依賴函數。主要使用到如下函數：

    • 選擇器函數$(class);

    • 運動框架startMove。

      • 同時在該函數引入時，還依賴於獲取實際樣式函數getStyle。

    • 獲取當前元素在同級元素的索引getIndex;

    • 事件代理函數：delegateEvent。

    • 添加class與刪除class元素addClass、romoveClass。

    第一步：實現點擊切換

    編寫幻燈片函數：Slideshow(element)。

    1. 根據圖片的數量建立與圖片數量相同的導航小點：ul>li*length 。設置其li樣式，而且默認把第一個li設置爲活動狀態className爲active。

    2. 編寫點擊函數clickLi：

      1. 給li添加事件代理函數。

      2. 據點擊的li的索引值算出來動畫的目標值，-iCurrent * getIndex(this);

      3. 移除全部li上的選中狀態active：編寫函數removeLiClass()，在後面咱們還要用到它。

      4. 設置當前點擊的li爲選中：狀態active

      5. 調用運動框架實現動畫效果。

    function Slideshow(element) {
    //1.建立li
    var imgArr = element.getElementsByTagName("img"); //獲取圖片數量
    var imgArrLen = imgArr.length; //緩存圖片數量
    var createUl = document.createElement("ul"); //建立小點的ul
    var iCurrent = parseInt(getStyle(imgArr[0], "width")); //獲取一張圖片的寬度
    element.style.width = iCurrent * imgArrLen + "px"; //設置圖片容器的寬度。
    //建立li
    for (var i = 0, len = imgArrLen; i < len; i++) {
        createUl.innerHTML += "<li></li>";
    }
    element.parentNode.appendChild(createUl); //插入導航
    addClass(createUl, "Slideshow-nav"); //添加導航樣式
    addClass(createUl.getElementsByTagName("li")[0], "active"); //默認設置第一個爲第當前活動的li
    
    //編寫點擊函數clickLi： 
    clickLi();
    /**
     * 點擊導航
     */
    function clickLi() {
        delegateEvent(createUl, "li", "click", function () {
            var iTaget = -iCurrent * getIndex(this);
            removeLiClass();
            addClass(this, "active"); //移出
            startMove(element, {
                "left": iTaget
            });
        });
    }
    
    /**
    * 用於移除全部的Li的選中狀態：active
    */
    function removeLiClass() {
        var oLi = createUl.getElementsByTagName("li");
        for (var i = 0, len = oLi.length; i < len; i++) {
            removeClass(oLi[i], "active");
        }
    }
}

    第二步：實現自動播放

    爲了方便後續的封裝，暫時只考慮：正序，不循環的狀況！

    1. 建立自動播放函數paly（）,獲取當前爲選中狀態active的li.

    2. 設置目標值，根據選中狀態的索引+1 *width來設置。（注意是負值，同時考慮索引值+1爲length的狀況。）

    3. 由於不循環，須要在設置(getIndex(heightLi)+1)===imgArrLen-1清除定時器。(其實就是輪播到最後的時候，至於爲何是這樣，能夠本身研究一下，更改一下值。)

    4. 獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點爲選擇中，調用運動框架！實現動畫，

    5. 添加定時器setInterval()，調用該函數，實現自動播放。

      • 測試幾回，你會發現：點擊li和自動播放之間存在衝突，動畫效果都沒作完就播放下一張了，如何解決呢？

    6. 給圖片容器添加一個鼠標移入和移除事件（mouseover、mouseover）也就是hover上去的效果

      • 移入時，清除定時器，暫停播放。

      • 移出時，開啓定時器，繼續輪播。

      • 而後你會發現問題成功的解決了！（並且我觀察了大部分的輪播，都是這個效果，移入暫停，移出繼續)

    這裏咱們的最基本的功能都實現了，代碼以下：(放在Slideshow()函數內部)

    var iSpeed = 4000;//定時器間隔。

hoverElement(); 
/*
* 移入圖片容器暫停，移除繼續播放。
*/
function hoverElement() {
    addEvent(element.parentNode, "mouseover", function () {
        clearInterval(timer);
    });
    addEvent(element.parentNode, "mouseout", function () {
        timer = setInterval(autoPlay, iSpeed);
    });
}

var timer = null;
timer = setInterval(autoPlay, iSpeed);
/*
* 自動播放函數。
*/
function autoPlay() {
    var heightLi = $(".Slideshow-nav .active"); //高亮的li
    var iTaget;
    iTaget = (getIndex(heightLi) + 1) === imgArrLen ? 0 : (-iCurrent * (getIndex(heightLi) + 1));

    if (getIndex(heightLi) + 1 === imgArrLen - 1) {
        clearInterval(timer);
    }
    var nextLi = heightLi.nextElementSibling;
    if (nextLi) {
        removeLiClass();
        addClass(nextLi, "active");
    }
    startMove(element, {
        "left": iTaget
    });
}

    第三步：添加配置項（題目要求完成）

    1. 獲取題目要求：主要是如下三點。

      1. 是否循環，默認爲循環。

      2. 是否反向，默認不反向。只有循環時，纔可反向。

      3. 輪播間隔時間，默認4000。

    2. 如何實現？（使用JSON以下：）

    /*
 * @param {JSON}         option       配置項
 *   @config   {String}  noLoop       不循環？，默認爲循環，只要存在則不循環，任意值
 *   @config   {String}  reverse      是否反向，任意值。只有「noLoop」不存在時，也就是隻有循環時，才執行。
 *   @config   {Number}  intervalTime 輪播間隔時間（單位爲毫秒），默認爲4000，
*/

    1. 在Slideshow()內部，如下部分進行修改或添加。

      1. 先從簡單的開始吧！判斷option.intervalTime是否存在而且更改iSpeed的值（這樣，輪播間隔時間配置就成功了），默認爲4000毫秒。

    2. 改變自動播放（一）：autoPlay函數。這裏是整個改造中最複雜的部分！分幾步進行。

      1. 把剛剛寫的autoPlay函數內的內容，除去var heightLi = $(".Slideshow-nav .active"); 、var iTaget;這兩個內容，其餘的都使用if(option.noLoop){}包裹起來。
        這樣就又完成了一個內容，當配置爲不循環時的狀況，就寫好了。

      2. 既然有if不循環的狀況,那麼就確定有else對應循環時的狀況對吧?（笑）那麼在裏面應該怎麼作呢？

      3. 第一次練習時，能夠不添加函數，直接使用if else,對應正向與反向的狀況！可是，在這裏爲了後面的進化，且不過多的闡述，就直接使用使用函數了，就叫他play(reverse)吧。
        在這裏固然傳入的參數是option.reverse，

    3. 改變自動播放（二）：編寫play(reverse)。

      1. 第一要務就是加入if eles啦，用來區分，true時爲反向，false爲正向（默認）。

      2. 先來講正向的狀況！其實特別簡單，有兩步：

        • 第一步：刪除(getIndex(heightLi)+1)===imgArrLen-1清除定時器的部分，只有這樣才能實現循環，

        • 第二步：在上面被提取到不循環的內容中(也就是初版的autoPlay())的if (nextLi)部分加上else的狀況就好了！

    //在下一個元素節點不存在的狀況下（也就是到了最後了），設置第一個節點爲活動狀態，就這樣正向的循環就成功了！
 else {
    removeLiClass();
    addClass($(".Slideshow-nav li"), "active");
}

    1. 反向的狀況(只須要對正向循環進行修改)：

      • 改變目標值iTaget。getIndex(heightLi) === 0 ? -iCurrent * (imgArrLen - 1) : -iCurrent * (getIndex(heightLi) - 1);

      • 改變下一個元素節點，爲前一個元素節點previousElementSibling。

      • 改變上面else的狀況，爲設置最後一個節點爲活動狀態。代碼就不貼了，有興趣的看源碼吧!

    1. 到如今函數就修改完成了。只須要在循環的狀況下，調用該函數，而且傳入option.reverse。

    其實到這裏咱們題目要求就完成了！

    可是！不挑戰一下怎麼能行？

    爲何不把左右點擊切換一塊兒實現了呢？

    既然這樣，咱們就繼續吧！

    第四步：擴展！左右箭頭實現！

    1. 建立並設置箭頭樣式(配合css使用)

    //建立左右導航
var createSpan = document.createElement("div");
addClass(createSpan, "left-right")
createSpan.innerHTML = "<span class='nav-left'>&lt;</span><span class='nav-right'>&gt;</span>"
element.parentNode.appendChild(createSpan);

    1. 建立點擊事件，事件代理。

    2. 炸裂的函數調用。

      • 還記得咱們剛剛的play(reverse)函數嗎？剛剛的功能徹底不用封裝函數，那爲何要作呢？就是這裏啦！

      • 想一想剛剛的函數實現了什麼功能呢？是否是正向循環，和反向循環？，自動播放是由於在外層有定時器的緣故。

      • 因此只須要調用傳參就好了！

    3. 傳什麼參數？

      • 想一想左右箭頭的索引，是否是0和1。這樣就懂了吧！

      • 對索引進行取反。傳參！代碼以下：

    delegateEvent(createSpan, "span", "click", function () {
    var heightLi = $(".Slideshow-nav .active"); //高亮的待選li
    var leftIndex = !getIndex(this); //點擊左時爲true，點擊又爲false
    //移動的目標值，默認正向
    play(leftIndex);
});

    至此，咱們的輪播圖組件就完成了！ 須要配合CSS使用。 經過此次封裝，收益良多，感興趣的話能夠看看源碼

    在線演示：小練習3：圖片輪播組件

    小練習4：輸入提示框

    任務描述

    在和上一任務同一目錄下面建立一個task0002_4.html文件，在js目錄中建立task0002_4.js，並在其中編碼，實現一個相似百度搜索框的輸入提示的功能。

    要求以下：

    • 容許使用鼠標點擊選中提示欄中的某個選項

    • 容許使用鍵盤上下鍵來選中提示欄中的某個選項，回車確認選中

    • 選中後，提示內容變動到輸入框中

    初級班：

    • 不要求和後端交互，能夠本身僞造一份提示數據例如：

    var suggestData = ['Simon', 'Erik', 'Kener'];

    中級班：

    • 本身搭建一個後端Server，使用Ajax來獲取提示數據

    示例：

    示例

    實現思路

    這裏我並無一開始就直接進行數據獲取的部分，而是進行了任務分解，以下：

    第一階段

    1. 先在使用寫好的ul>li標籤下，。添加3個事件mouseover、mouseout、click。實現點擊li使其值變成輸入框內的值。（直接使用事件代理）

    2. 對輸入框添加鍵盤事件（對，你沒看錯，只有在聚焦在輸入框時才觸發）

      • 獲取當前高亮的li。沒有則設第一個爲高亮active。

      • 判斷keyCode使用鍵盤下鍵,使用nextElementSibling方法獲取下一個節點（向上同理）,取消當前的active，設置下一個爲active。（使用鍵盤上下選中的效果,處理完成）

      • 判斷keyCode，獲取當前狀態爲active的值，實現回車時，把其設爲input的值。

    3. 須要注意的地方：

      • 在移除高亮狀態時，最好是遍歷一遍。由於鍵盤與鼠標劃過有可能同時觸發，致使有多個高亮。

      • 錯誤處理

    第二階段

    1. 刪除原來的ul>lihtml部分的li。添加對於輸入框進行實時監聽（這部分不在這裏展開講，如何實現你們去google吧，由於一展開就太多要說的了）。

    1. 使用AJAX獲取服務器上的數據，解析，遍歷，並進行數據匹配。

    2. 匹配成功顯示ul，不然設爲none。

    3. 使用正則表達式的match方法，來獲取匹配成功的把部分，使用span進行高亮顯示。而且插入ul

    4. 改造第一階段的函數：

    • 由於是使用的事件代理，直接對ul添加事件，因此須要修改的部分不是不少。

    • click和enter部分獲取的值，由於span標籤的存在，須要使用正則進行處理，輸出刪除span後的值。

    在線演示：小練習4：輸入框即時提示

    小練習5：界面拖拽交互

    • 實現一個可拖拽交互的界面

    • 如示例圖，左右兩側各有一個容器，裏面的選項能夠經過拖拽來左右移動

    • 被選擇拖拽的容器在拖拽過程後，在原容器中消失，跟隨鼠標移動

    • 注意拖拽釋放後，要添加到準確的位置

    • 拖拽到什麼位置認爲是能夠添加到新容器的規則本身定

    • 注意交互中良好的用戶體驗和使用引導

    示例

    實現思路：

    第一步：封裝拖拽函數

    開一個DEMO頁面，實踐以下：

    1. 瞭解應該用到的事件，onmousedown、onmousemove、onmouseup。

    2. 思考對誰添加事件?

      1. 在鼠標點擊div時，對div添加onmousedown,表示鼠標按下。

      2. 在事件內給document添加onmousemove。（爲啥給document加呢？由於給div加在移動過快時會跳出去）表示鼠標移動。

      3. 而且添加document添加onmouseup，表示鼠標已經擡起，清除移動事件，以及自己。

    3. 思考如何設置對象的位置？

      1. 直接獲取鼠標的位置並設置給div行不行呢？試試吧！顯然，會出現問題，點擊鼠標就到div左上角去了。

      2. 那麼怎麼改變呢？獲取鼠標在div中的位置？對。就這樣，在鼠標按下時記錄鼠標在div中的位置.

      3. 在鼠標移動時，用當前的位置，減去剛剛的位置，這就是應該的值！

    4. 別忘了鼠標擡起時，須要清除事件，否則鼠標就粘住了。

    這裏用到了event,事件對象的相關概念，推薦觀看慕課網的視頻。DOM事件探祕

    1. 善用this。
      擴展

    /**
 * 鼠標拖拽函數。
 * @param {HTMLElement} element 須要拖拽的對象
 */
function setDrag(element) {
    addEvent(element, "mousedown", onmousedown);
    //鼠標按下
    function onmousedown(ev) {
        var oEvent = ev || event;
        var disX = oEvent.clientX - this.offsetLeft;
        var disY = oEvent.clientY - this.offsetTop;
        var that = this;
        addEvent(document, "mousemove", onmousemove);
        addEvent(document, "mouseup", onmouseup);
        /**
         * 鼠標移動
         */
        function onmousemove(ev) {
            var oEvent = ev || event;
            that.style.left = oEvent.clientX - disX + "px";
            that.style.top = oEvent.clientY - disY + "px"
        }
        /**
         * 鼠標擡起刪除事件
         */
        function onmouseup() {
            removeEvent(document, "mousemove", onmousemove);
            removeEvent(document, "mouseup", onmouseup);
        }
    }
}

    第二步：佈局轉換函數

    1. 兩個參數，第一個參數，傳入父級對象。第二個參數傳入標籤名，

    2. 循環，使用數組，對象，獲取標籤當前元素的位置left，top。（offsetLeft）。這裏不能使用獲取實際樣式函數，由於自己就須要獲取其相對父元素的位置。

    3. 第二個循環

      • 設置left，top值。

      • 設置絕對定位。

      • 取消原有的margin值。

    4. 調用函數，把對象從文檔流佈局，變成絕對定位佈局。

    /**
 * 佈局轉換函數
 * @param {HTMLElment} element  HTML對象
 * @param {string}     childEle 其內須要轉換的標籤名
 */
function toPosition(element, childEle) {
    var eleArr = element.getElementsByTagName(childEle);
    var aPos = [];
    //
    for (var i = 0, len = eleArr.length; i < len; i++) {
        aPos[i] = {
            left: eleArr[i].offsetLeft,
            top: eleArr[i].offsetTop
        };
    }
    for (var i = 0, len = eleArr.length; i < len; i++) {
        eleArr[i].style.left = aPos[i].left + "px";
        eleArr[i].style.top = aPos[i].top + "px";
        eleArr[i].style.position = "absolute";
        eleArr[i].style.margin = "0";
    }
}

    在線演示：小練習5：拖拽交互

    第三步：實現拖拽

    前面咱們已經實現了setDrag(element)函數，常規方法就是直使用循環，而後傳入element。

    可是，爲何不用事件代理呢？

    特別簡單，只須要對上面寫的函數進行一些簡單的改裝。

    delegateEvent(parentElement, "li", "mousedown", function (ev) {
//此處是原函數中的內容。
}

    如今知道爲何上面的函數會用到this了吧？

    第四步：碰撞檢測函數

    先來看張圖：
    碰撞檢測示意圖

    是否是有瞬間豁然開朗的感受呢？

    獲取相關值，只須要考慮不碰不上的狀況就好了！。以下：

    /**
 * 碰撞檢測函數
 * @param   {object}  obj1 對象1
 * @param   {object}  obj2 對象2
 * @returns {boolean} 碰撞時返回true，不然反正false
 */
function hitDetection(obj1, obj2) {
    //對象1的相關值
    var l1 = obj1.offsetLeft;
    var r1 = obj1.offsetLeft + obj1.offsetWidth;
    var t1 = obj1.offsetTop;
    var b1 = obj1.offsetTop + obj1.offsetHeight;
    //對象2的相關值
    var l2 = obj2.offsetLeft;
    var r2 = obj2.offsetLeft + obj2.offsetWidth;
    var t2 = obj2.offsetTop;
    var b2 = obj2.offsetTop + obj2.offsetHeight;

    if (r1 < l1 || l1 > r2 || b1 < t2 || t1 > b2) {
        return false;//沒碰上
    } else {
        return true;
    }
}

    第五步：處理各類碰撞狀況

    這裏講起來就太複雜了。源代碼中註釋仍是比較詳細的，有興趣能夠看下

    相關文章
    相關標籤/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公眾號
       歡迎關注本站公眾號,獲取更多信息
    聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程