180405 demo

選項卡

<div class="wrapper">
    <div class="search">
        <input type="text"> Male:
        <input type="radio" class="btn mBtn" name="sex"></button>
        Female:<input type="radio" class="btn fBtn" name="sex"></button>
        All:<input type="radio" checked='checked' class='btn aBtn' name="sex"></input>
    </div>
    <div class="friendList">
        <ul>
            <!-- <li>
                <img src="./src/img/1.png">
                <p class="name">王港</p>
                <p class="des">頸椎不好</p>
            </li>
            <li>
                <img src="./src/img/2.png">
                <p class="name">劉金雷</p>
                <p class="des">你沒有見過陌生的臉</p>
            </li> -->
        </ul>
var personArr = [{name: '王港', src: './src/img/1.png',des: '頸椎不好',sex: 'm'}, 
                 {name: '劉瑩',src: './src/img/5.png',des: '我是誰',sex: 'f'}, 
                 {name: '王秀瑩',src: './src/img/4.png',des: '我很好看',sex: 'f'},
                 {name: '劉飛翔',src: './src/img/2.png',des: '瓜皮劉',sex: 'm'},
                 {name: '劉金雷',src: './src/img/3.png',des: '你沒有見過陌生的臉',sex: 'm'}];

//------------------從後臺獲取數據存到數組裏-----------------

var oUl = document.getElementsByTagName('ul')[0];

//-------------------   獲得ul對象    --------------------------

var store = {
    text: '', // 輸入文本狀態
    sex: 'btn aBtn' // 按鈕點選狀態
}

//-----------------------  全局狀態標記  ------------------------

function renderList(arr) {
    var htmlStr = '';
    arr.forEach(function(ele, index) {
        htmlStr += 
'<li><img src="' + ele.src + '"/><p class="name">' 
+ ele.name + '</p><p class="des">' + ele.des + '</p></li>';
    });
    oUl.innerHTML = htmlStr;
}
renderList(personArr);

//------------------------  數組塞進標籤  ---------------------------------

var oInp = document.getElementsByTagName('input')[0]; //  獲取文本框dom對象

oInp.oninput = function() { // 註冊鍵入事件
    store.text = this.value; //鍵入input標籤的值，通過dom對象的value屬性賦值給 全局狀態標記text
    //console.log(store.text);
    renderList(lastFilter(personArr)); // 調用最終篩選函數，得到返回值篩選的數組，變成標籤
}

//--------------------獲得輸入框鍵入狀態，並連接好鍵入信息與狀態標記的映射----------------------

function filterByText(filterText, arr) { // 參數：鍵入文本，信息數組
    if (!filterText) { //沒有輸入文本，返回現有數組
        return arr;
    } else {
        return arr.filter(function(ele, index) { 
// 信息數組中所有元素( 每一個元素是一個對象 )，遍歷全部以對象爲單位的元素
            return ele.name.indexOf(filterText) != -1; 
// 篩選所有元素的屬性name值與傳入參數即鍵入文本匹配文本相一致的對象
//兄弟你單純調用這個indexof是隻返回一個，可是你是返回所有indexof ！= -1 
        });}}

//---------------- 文本篩選函數，參數：匹配文本和數組  返回：匹配文本後的對象  ---------------------

// var oRadioArr1 = document.getElementsByClassName('btn');
// console.log(oRadioArr1);

var oRadioArr = Array.prototype.slice.call(document.getElementsByClassName('btn'), 0);
//獲取按鈕dom對象轉換成數組  
console.log(oRadioArr);

oRadioArr.forEach(function(ele, index) {
    ele.onclick = function() {
        store.sex = this.className;
        renderList(lastFilter(personArr));
    }
});

//---------  遍歷每一個按鈕註冊點擊事件：將當前被點擊按鈕的類名賦值給全局狀態標記  ---------
//                    完成按鈕標籤與狀態標記的映射

function filterBySex(sexStr, arr) {
    if (sexStr == 'btn aBtn') {
        return arr;
    } else {
        return arr.filter(function(ele, index) {
            if (sexStr.indexOf(ele.sex) != -1) {
                return true;
                // 返回結果是true的數組
                }})}};

//--------------- 按鈕/性別篩選函數: 參數：按鈕對應狀態(性別)，信息數組 返回：篩選後數組---------------------

function combineFilterFunc(obj) { 
//整合函數，既然將函數傳入當做參數，那麼整合函數裏要考慮作爲參數的函數參數
//實參列表：{對象{text:實參列{store[text],personArr}，sex:實參列表{store[sex],personArr}} , personArr}
    var filterFuncObj = obj;
    console.log(filterFuncObj);
    return function(arr) {
        var lastArr = arr; // 
        console.log(lastArr);


        for (var prop in filterFuncObj) { //調用兩個函數
            lastArr = filterFuncObj[prop](store[prop], lastArr); 
            // filterFuncObj.filterByText(全局狀態標記：鍵入文本/性別狀態,當前數組)
            // filterFuncObj[text](store[text],personArr)
            // filterFuncObj[sex](store[sex],filterByText-personArr)

        }
        return lastArr; // 經過文本性別共同篩選後的數組
 };}

//-----------------  完整篩選函數：參數：文本篩選函數+性別篩選函數  返回值：最終數組----------------------

var lastFilter = combineFilterFunc({
    text: filterByText, 
// 精髓：將函數作爲屬性賦值給變量 text  全局狀態標記對應的屬性名也是 text   
//當執行text函數時可以映射相應用到的全局標記
    sex: filterBySex
});

//--------------- 封裝好篩選函數 -------------------

選項卡

<style>
    * {
        padding: 0px;
        margin: 0px;
        text-decoration: none;
    }

    .wrapper {
        padding: 10px 15px;
        border: 2px solid #ccc;
        width: 500px;
        border-radius: 6px;
        margin: 100px auto 0px auto;
    }

    .wrapper .part {
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }

    .wrapper .part span {
        color: #bbbbbb;
        margin-right: 10px;
    }

    .wrapper .part a {
        padding: 4px 6px;
        margin-right: 2px;
    }

    .wrapper .part .active {
        color: #fff;
        background-color: #f40;
    }

    .wrapper .content .box {
        height: 200px;
        display: none;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        color: orange;
    }

    .wrapper .content .active {
        display: block;
    }
</style>

<!-- 經常出現不同的狀態，可以選擇先把樣式寫好 -->
</head>

<body>
<div class="wrapper">
    <div class="part">
        <span>地區：</span>
        <a href="#" class="active">大陸</a>
        <a href="#">日韓</a>
        <a href="#">香港</a>
        <a href="#">歐美</a>
    </div>
    <div class="content">
        <div class="box active">
            胡歌
        </div>
        <div class="box">
            小栗旬
        </div>
        <div class="box">
            鄧紫棋
        </div>
        <div class="box">
            傑森斯坦森
        </div>
    </div>
</div>
<script>
    var oBtnArray = document.getElementsByTagName('a'); //類數組，數組方法受限
    var oDivArray = document.getElementsByClassName('box');
    var lastActiveBtn = oBtnArray[0];
    var lastActiveDiv = oDivArray[0];

    for (var i = 0; i < oBtnArray.length; i++) {
        (function(_Index) {
            oBtnArray[_Index].onclick = function() {
                changeBtnStatus(_Index);
                changeDivStatus(_Index);
            }
        })(i) // 有自己的AO
    }

    // for (var i = 0; i < oBtnArray.length; i++) {
    //     oBtnArray[i].onclick = function() {
    //         console.log(i); //    i一直是4 ， 函數AO沒有 ， GO的i在函數執行前變成4
    //         changeBtnStatus(i);
    //     }
    // }
    // // i = 4  閉包 立即執行函數

    function changeBtnStatus(index) {
        lastActiveBtn.className = '';
        oBtnArray[index].className = 'active';
        lastActiveBtn = oBtnArray[index];
    }

    function changeDivStatus(index) {
        lastActiveDiv.className = 'box';
        oDivArray[index].className = 'box active';
        lastActiveDiv = oDivArray[index];
    }
</script>

輪播圖

//-------------html---------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><img src="./img/cat_furry_gray_120328_3840x2400.jpg" alt=""></li>
            <li><img src="./img/dog_muzzle_eyes_lie_95312_3840x2400.jpg" alt=""></li>
            <li><img src="./img/flamingos_birds_colorful_feathers_120420_3840x2400.jpg" alt="./img/flamingos_birds_colorful_feathers_120420_3840x2400.jpg"></li>
            <li><img src="./img/pug_dog_muzzle_look_scarf_120435_3840x2400.jpg" alt="./img/pug_dog_muzzle_look_scarf_120435_3840x2400.jpg"></li>
            <li><img src="./img/cat_furry_gray_120328_3840x2400.jpg" alt="./img/cat_furry_gray_120328_3840x2400.jpg"></li>
        </ul>
        <div class="btn leftBtn">&lt</div>
        <div class="btn rightBtn">&gt</div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="move.js"></script>
    <script src="./index.js"></script>
</body>
</html>

//---------------js--------------
//-----------引入運動框架----------

var oUl = document.getElementsByTagName("ul")[0],
    oLeftBtn = document.getElementsByClassName("leftBtn")[0],
    oRightBtn = document.getElementsByClassName("rightBtn")[0],
    oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span'),
    timer = null,
    moveDis = oUl.children[0].offsetWidth,
    num = oUl.children.length - 1,
    index = 0,
    locked = true; 


for(var i = 0; i < oSpanArray.length; i++){
    (function(_index){
        oSpanArray[_index].onclick = function (){
            locked = false;
            clearTimeout(timer);
            index = _index;
            startMove(oUl, {left: - (_index * moveDis) },function (){
                changeIndex(index);
                locked = true;
                timer = setInterval(function(){
                    autoMove('->');
                },1500);
            });
        } 
    })(i);
}

oLeftBtn.onclick = function(){
    autoMove('<-');
}

oRightBtn.onclick = function(){
    autoMove('->');
}

function autoMove(direction){
    if(locked){
        locked = false;
        clearTimeout(timer);
        if(direction === '->'){
            index++;
            startMove(oUl, {left: oUl.offsetLeft - moveDis}, function(){
                if(oUl.offsetLeft === -moveDis * num){
                    oUl.style.left = '0px';
                    index = 0;
                }
                locked = true;
                changeIndex(index);
                timer = setTimeout(function(){
                    autoMove('->');
                },1500);
            });
        }else{
            if(oUl.offsetLeft === 0){
                oUl.style.left = -moveDis * num + 'px';
                index = 4;
            }
            index--;
            startMove(oUl,{left:oUl.offsetLeft + moveDis}, function(){
                locked = true;
                changeIndex(index);
                timer = setTimeout(function(){
                    autoMove('->');
                },1500);
            })
        }
    }
}

function changeIndex(index){
    for(var i = 0; i < oSpanArray.length; i++){
        oSpanArray[i].className = '';
    }
    oSpanArray[index].className = 'active';
}

timer = setInterval(function(){
    autoMove('->');
},1500);

// ---------------css----------------

*{
    padding:0px;
    margin:0px;
}

.wrapper{
    position: relative;
    width: 960px;
    height: 600px;
    margin: 100px auto 0px;
    /* border: 1px solid black; */
    overflow: hidden;
}

.wrapper ul{
    position: absolute;
    width: 4800px;
    left: 0px;
    list-style: none;
}

.wrapper ul::after{
    content:'';
    clear: both;
    display: block;
}

.wrapper ul li{
    width:960px;
    height:600px;
    float: left;
}

.wrapper ul li img{
    width:100%;
    height: 100%;
}

.wrapper .btn{
    position: absolute;
    top: 50%;
    margin-top: -55px;
    width: 80px;
    height: 120px;
    background-color: #000;
    color: beige;
    font-size: 80px;
    line-height: 120px;
    text-align: center;
    opacity: 0.2;
    cursor: pointer;
}

.wrapper .btn:hover{
    opacity: 0.5;
}

.wrapper .leftBtn{
    left: 10px;
}
.wrapper .rightBtn{
    right:10px;
}

.wrapper .sliderIndex{
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.wrapper .sliderIndex{
    position: absolute;
    bottom: 17px;
    width: 100%;
    text-align: center;
}

.wrapper .sliderIndex span{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: 30px;
}

.wrapper .sliderIndex span.active{
    background-color: rgb(72, 137, 223);
}


// --------------運動框架-----------------

function startMove(obj, targetObj, cb) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var bStop = true;
        for (var attr in targetObj) {
            if (attr != 'opacity') {
                iCur = parseInt(getStyle(obj, attr));
            } else {
                iCur = parseFloat(getStyle(obj, attr)) * 100;
            }
            iSpeed = (targetObj[attr] - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (attr == 'opacity') {
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
            if (targetObj[attr] !== iCur) {
                bStop = false;
            }
        }
            if (bStop) {
                clearInterval(obj.timer);
                (typeof cb) === 'function' && cb.apply(obj);
            }
    }, 30);
}

function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj, null)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}

選項卡

選項卡

輪播圖

180331 原型

180328 正則表達式

180406 客戶端JS WebAPI

180306 表達式

《JavaScript DOM 編程藝術（第二版）》筆記

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結