摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。

轉載自我的個人博客
歡迎大家批評指正

包括5部分：

小練習1-處理用戶輸入

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

小練習3：輪播圖

小練習4：輸入提示框

小練習5：界面拖拽交互

源碼地址
task0002 在線Demo

這里直接可以利用原來寫過的util.js。所以應該不是特別難。主要考察對字符串的操作，以及正則表達式的使用

在task0002目錄下創建一個task0002_1.html文件，以及一個js目錄和css目錄，在js目錄中創建task0002_1.js，并將之前寫的util.js也拷貝到js目錄下。然后完成以下需求。

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

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

實現

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

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

uniqArray函數進行去重操作。

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

innerHTML進行輸出。

html：

提交

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 += "
" + trimValue + "
"
            }
        }
    })
})();

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

當點擊按鈕時的行為同上

實現

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

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

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

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

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

實現

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

直接判斷數組長度就行了。。輸入為空時，判斷字符串=“”。

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

html:

處理并輸出
輸入的愛好數量不能超過10個，或什么都不輸入

js:

(function handle_1() {
    var inp = $("#user_input");
    var out = $("#user_output");
    $.click("#btn", function () {
        var value = inp.value.split(/
|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 += "" + "" + trimValue + ""
                }
            }
        }
    })
})();

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

在和上一任務同一目錄下面創建一個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上

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

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

(60 * 60 * 24) ：剩余的天數。

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

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

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

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

取消計時器:clearTimeout()停止計時器。

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

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

在和上一任務同一目錄下面創建一個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)。

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

編寫點擊函數clickLi：

給li添加事件代理函數。

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

移除所有li上的選中狀態active：編寫函數removeLiClass()，在后面我們還要用到它。

設置當前點擊的li為選中：狀態active

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

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 += "
";
    }
    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");
        }
    }
}

為了方便后續的封裝，暫時只考慮：正序，不循環的情況！

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

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

因為不循環，需要在設置(getIndex(heightLi)+1)===imgArrLen-1清除定時器。(其實就是輪播到最后的時候，至于為什么是這樣，可以自己研究一下，更改一下值。)

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

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

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

給圖片容器添加一個鼠標移入和移除事件（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
    });
}

獲取題目要求：主要是以下三點。

是否循環，默認為循環。

是否反向，默認不反向。只有循環時，才可反向。

輪播間隔時間，默認4000。

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

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

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

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

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

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

既然有if不循環的情況,那么就肯定有else對應循環時的情況對吧?（笑）那么在里面應該怎么做呢？

第一次練習時，可以不添加函數，直接使用if else,對應正向與反向的情況！但是，在這里為了后面的進化，且不過多的闡述，就直接使用使用函數了，就叫他play(reverse)吧。
在這里當然傳入的參數是option.reverse，

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

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

先來說正向的情況！其實特別簡單，有兩步：

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

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

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

反向的情況(只需要對正向循環進行修改)：

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

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

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

到現在函數就修改完成了。只需要在循環的情況下，調用該函數，并且傳入option.reverse。

其實到這里我們題目要求就完成了！

但是！不挑戰一下怎么能行？

為什么不把左右點擊切換一起實現了呢？

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

創建并設置箭頭樣式(配合css使用)

//創建左右導航
var createSpan = document.createElement("div");
addClass(createSpan, "left-right")
createSpan.innerHTML = "<>"
element.parentNode.appendChild(createSpan);

創建點擊事件，事件代理。

炸裂的函數調用。

還記得我們剛剛的play(reverse)函數嗎？剛剛的功能完全不用封裝函數，那為什么要做呢？就是這里啦！

想想剛剛的函數實現了什么功能呢？是不是正向循環，和反向循環？，自動播放是因為在外層有定時器的緣故。

所以只需要調用傳參就行了！

傳什么參數？

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

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

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

至此，我們的輪播圖組件就完成了！ 需要配合CSS使用。 通過這次封裝，收益良多，感興趣的話可以看看源碼

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

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

要求如下：

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

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

選中后，提示內容變更到輸入框中

初級班：

不要求和后端交互，可以自己偽造一份提示數據例如：

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

中級班：

自己搭建一個后端Server，使用Ajax來獲取提示數據

示例：

這里我并沒有一開始就直接進行數據獲取的部分，而是進行了任務分解，如下：

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

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

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

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

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

需要注意的地方：

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

錯誤處理

刪除原來的ul>lihtml部分的li。添加對于輸入框進行實時監聽（這部分不在這里展開講，如何實現大家去google吧，因為一展開就太多要說的了）。

給個參考：實時監聽輸入框值變化

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

匹配成功顯示ul，否則設為none。

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

改造第一階段的函數：

因為是使用的事件代理，直接對ul添加事件，所以需要修改的部分不是很多。

click和enter部分獲取的值，因為span標簽的存在，需要使用正則進行處理，輸出刪除span后的值。

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

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

如示例圖，左右兩側各有一個容器，里面的選項可以通過拖拽來左右移動

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

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

拖拽到什么位置認為是可以添加到新容器的規則自己定

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

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

了解應該用到的事件，onmousedown、onmousemove、onmouseup。

思考對誰添加事件?

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

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

并且添加document添加onmouseup，表示鼠標已經抬起，清除移動事件，以及本身。

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

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

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

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

別忘了鼠標抬起時，需要清除事件，不然鼠標就粘住了。

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

善用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);
        }
    }
}

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

循環，使用數組，對象，獲取標簽當前元素的位置left，top。（offsetLeft）。這里不能使用獲取實際樣式函數，因為本身就需要獲取其相對父元素的位置。

第二個循環

設置left，top值。

設置絕對定位。

取消原有的margin值。

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

/**
 * 布局轉換函數
 * @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;
    }
}

這里講起來就太復雜了。源代碼中注釋還是比較詳細的，有興趣可以看下