原生js實現商品排序功能

CBD發表於2019-11-08
JS排序

實現介面如下：

原生js實現商品排序功能
分析其事件源，只有三個按鈕；給每個按鈕實現三種不同的排序方式，一般也有很多種方式； 此案例實現三種方式用一個函式封裝，相對來說比較簡單易懂； 程式碼如下： 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>給花花們排序</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="box">
        <ul class="clearfix">
            <li>
                <img src="images/1.jpg" alt="粉色花"/>
                <p>
                    <span class="flowers">粉色花</span>
                    <span>¥<i class="price">18</i></span>
                </p>
            </li>
            <li>
                <img src="images/2.jpg" alt="小紅花"/>
                <p>
                    <span class="flowers">小紅花</span>
                    <span>¥<i class="price">30</i></span>
                </p>
            </li>
            <li>
                <img src="images/3.jpg" alt="白格桑花"/>
                <p>
                    <span class="flowers">白格桑花</span>
                    <span>¥<i class="price">45</i></span>
                </p>
            </li>
            <li>
                <img src="images/4.jpg" alt="荷花"/>
                <p>
                    <span class="flowers">荷花</span>
                    <span>¥<i class="price">28</i></span>
                </p>
            </li>
            <li>
                <img src="images/5.jpg" alt="格桑花"/>
                <p>
                    <span class="flowers">格桑花</span>
                    <span>¥<i class="price">15</i></span>
                </p>
            </li>
            <li>
                <img src="images/6.jpg" alt="七星彩花"/>
                <p>
                    <span class="flowers">七彩花</span>
                    <span>¥<i class="price">48</i></span>
                </p>
            </li>
            <li>
                <img src="images/7.jpg" alt="月季花"/>
                <p>
                    <span class="flowers">月季花</span>
                    <span>¥<i class="price">82</i></span>
                </p>
            </li>
            <li>
                <img src="images/8.jpg" alt="睡蓮"/>
                <p>
                    <span class="flowers">睡蓮</span>
                    <span>¥<i class="price">80</i></span>
                </p>
            </li>
        </ul>
        <div class="btn clearfix">
            <button>從高到低</button>
            <button>從低到高</button>
            <button>隨機排序</button>
        </div>
    </div> 
    <script src="js/index.js"></script>
</body>
</html>
複製程式碼

css程式碼：

*{
    margin: 0;
    padding: 0;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.box{
    width:960px;
    padding:30px 30px;
    margin:40px auto;
}
ul{
    list-style: none;
    width: 100%;
    margin:0px;
    border:1px solid #bbb;
    padding:20px;
}
ul li{
    float: left;
    width:220px;
    height: 200px;
    margin:0 10px 35px;
}
ul li img{
    width:220px;
    height:200px;
}
ul li p{
    font-size:16px;
}
ul li p span:nth-child(2){
    float:right;
}
ul li i{
    color:red;
    font-size:20px;
    font-style:normal;
}
/* .box .btn{
    width:200px;
    height:60px;
    float:right;
} */
.box .btn button{
    float:right;
    width:80px;
    height: 30px;
    line-height:30px;
    background: #bbb;
}
複製程式碼

js程式碼：

var oBtn = document.getElementsByTagName('button');
var li = document.querySelectorAll('li'); 
var len = li.length;
var Mo = document.getElementsByTagName('i');
var arr1=[];
var temp = 0;

for(var i=0;i<len;i++){
    arr1[i] = parseFloat(Mo[i].innerHTML);
}
function SortArr(arr,flag){
    for(var i = 0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-1-i;j++){
            flag=(flag == 1) || (flag == -1)?flag:(Math.random()-0.5);
            if(arr[j]*flag>arr[j+1]*flag){
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;

                temp = li[j].innerHTML;
                li[j].innerHTML = li[j+1].innerHTML;
                li[j+1].innerHTML = temp;
            }
        }
    } 
    return arr;
}
oBtn[2].onclick= function(){
    arr = SortArr(arr1,Math.ceil(Math.random()*10));//這裡可以傳隨機值或者不傳值，因為預設是隨機的
    console.log(arr);
}
oBtn[1].onclick= function(){
    arr = SortArr(arr1,1);
    console.log(arr);
}
oBtn[0].onclick= function(){
    arr = SortArr(arr1,-1);
    console.log(arr);
}
複製程式碼

利用函式傳參方式實現三種模式，是不是很簡單呢？

相關文章