Day08-1（转换数组，冒泡排序）

转换数组

reverse() 转换数组
sort() 按首字母排序；
splice 添加 或 删除 ；

// reverse()  转换数组
    var arr = [1,2,3,5,4,6,10];
    arr.reverse();
    console.log(arr);


    // sort()  按首字母排序；
    var arr1 = [5,6,8,1,10,2];
    arr1.sort();
    console.log(arr1);

    // splice  添加 或 删除 ；
    var arr2 = [2,5,10,"ky",1,9,6,"a"];
    arr.splice(2,5);
    console.log(arr2);

数组去重

遇到两两比较的时候就想到两个for循环
有重复的就删除掉

<script>

    /*数组去重*/
    var arr = [1,2,2,2,4,31,2,2,2,4,3];


    /*遇到两两比较的时候就想到两个for循环*/
    /*有重复的就删除掉*/
    for(var i= 0;i<arr.length;i++){
        for(var j = i+1;j<arr.length ;j++){
            /*有重复（相等）的才能进if（条件）*/
            if(arr[i] == arr[j]){
                arr.splice(j,1);
                j--;
            }
        }
    }
    console.log(arr);

</script>

冒泡排序

<div id="box">
    <button>姓名</button>
    <button>年龄</button>
    <button>成绩</button>
    <div>
        <ul>
            <li>
                <p>张三</p>
                <i id="a1">116</i>
                <span>9</span>
            </li>
            <li>
                <p>李四</p>
                <i id="a2">39</i>
                <span>69</span>
            </li>
            <li>
                <p>小李</p>
                <i id="a3">15</i>
                <span>88</span>
            </li>
            <li>
                <p>小赵</p>
                <i id="a4">17</i>
                <span>28</span>
            </li>
        </ul>
    </div>
</div>

<style>
        *{
            margin: 0;padding: 0;
        }
        button{
            width: 50px;
            height: 30px;
        }
        #box{
            width: 160px;
            margin: 100px auto;
        }
        ul{
            list-style: none;
            width:160px;
        }
        ul li{
            margin: 5px 0;
        }
        p{
            display: inline-block;
            width: 50px;text-align: center;
        }
        i{
            font-style: normal;
            display: inline-block;
            width: 50px;text-align: center;
        }
        span{
            display: inline-block;
            text-align: center;
            width: 50px;
        }
    </style>

<script>
    function $(tag){
        return document.getElementsByTagName(tag);
    }
    function fn(id){
        return document.getElementById(id).innerHTML;
    }
    var  a1 = Number(fn("a1")),a2= Number(fn("a2")),a3 = Number(fn("a3")),a4= Number(fn("a4"));
    var arr = [a1,a2,a3,a4];
    var lis = $("li");

    $("button")[1].onclick = function(){
        for(var i=0;i<arr.length-1;i++){
            for(var j=0;j<arr.length-1-i;j++){
                if(arr[j]>arr[j+1]){
                    var sum = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = sum;
                }
            }
        }
        console.log(arr);
    }
</script>

搜索框提示

<div class="box">
    <input type="text"/>
    <div></div>
</div>


<script>
    var arr = ["哀伤的时光","哀伤的日子","哀伤的狗狗","狗狗的治疗","怎么样养好狗狗","狗居的日子","那些年回不去的时光"];
    var input = document.getElementsByTagName("input")[0];
    var div = document.getElementsByTagName("div")[1];

    for(var i=0;i<arr.length;i++){
                    div.innerHTML += arr[i]+"<br/>";
                }

    input.oninput = function(){
        /*事件的执行程序里边*/
        var v = input.value;
        div.innerHTML = '';
         
         for(var i=0;i<arr.length;i++){
            /*没有的*/
           if( arr[i].search(v) != -1){
               div.innerHTML += arr[i]+"<br/>";
           }
        }
    }
  
</script>