美文网首页
原生js实现简单的正序倒序的排列

原生js实现简单的正序倒序的排列

作者: 霍林河眼中的许先生 | 来源:发表于2019-04-26 14:46 被阅读0次

    列表开发中用的到的小功能,列表正序倒序功能。

    直接上代码不多说


    html部分

    ```

    <button id="qie" onclick="cut();">正序</button>

        <ul id="gets">

        </ul>

    ```

    css

    ```

    button{

        width: 200px;

        height: 100px;

        font-size: 50px;

    }

    gets{

        width: 100px;

        overflow: hidden;

    }

    #gets li{

    float: left;

    width: 100%;

    overflow: hidden

    }

    li span{

        float: right;

    }

    ```

    js

    ```

    var result =[

          {id:1,name:'中国银行'},

          {id:2,name:'北京银行'},

          {id:3,name:'建设银行'},

          {id:4,name:'工商银行'},

          {id:5,name:'交通银行'}

        ]

        var qie =document.getElementById("qie")

        var gets= document.getElementById("gets")

        //  初始化

          cut();

        // 正序

        function sortId(a,b){ 

          return a.id-b.id 

        }

        // 倒序

        function sortId2(a,b){ 

          return b.id-a.id 

        }

        var flag=true;

        function cut(){

                    if(flag){

                        qie.innerHTML="倒序"

                        result.sort(sortId2);

                        // console.log(result);

                        var res="";

                        for (var i=0;i<result.length;i++){ 

                            res += '<li>' +result[i].id  +'<span>'+ result[i].name+'</span>'+'</li>'

                        }

                        gets.innerHTML=res;

                        flag = false;

                    }else{

                        qie.innerHTML="正序"

                        result.sort(sortId);

                        var res2="";

                        for (var i=0;i<result.length;i++){ 

                            res2 += '<li>' +result[i].id  +'<span>'+ result[i].name+'</span>'+'</li>'

                        }

                        gets.innerHTML=res2;

                        flag = true;

                    }

        }

    ```

    相关文章

      网友评论

          本文标题:原生js实现简单的正序倒序的排列

          本文链接:https://www.haomeiwen.com/subject/znvfnqtx.html