基于电商网站上的商品价格从高到低从低到高基本原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link href="css/style.css" rel="stylesheet" />
    <style>
        #box{
            border:2px solid #000;
            width:800px;
            margin:20px auto;
        }
        #box div{
            font-size:80px;
            display: inline-block;
            padding:40px 60px;
            margin:40px;
            border:1px solid;
        }
        button{
            width:200px;
            height: 100px;
            background:#ccc;
            border:0;
            font-size:20px;
        }
        button:hover{
            background:#000;
            color:#fff;
        }
        .buttonBox{
            width:800px;
            margin:0 auto;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="buttonBox" >
    <button>由大到小</button>
    <button>由小到大</button>
    </div>
    <div id="box">
        <div>8</div>
        <div>4</div>
        <div>5</div>
        <div>7</div>
        <div>2</div>
        <div>3</div>
        <div>6</div>
        <div>1</div>
    </div>
JS样式
    <script>
        var button=document.querySelectorAll("button");
        var box=document.querySelector("#box");
        var div=box.querySelectorAll("div");
        var all=[]
        console.log(div)


        for(var i=0;i<div.length;i++){
            all.push(div[i].innerText)
        }
        

        button[0].onclick=function(){
            all.sort(function(a,b){
            return b-a;
             })
            console.log(all)
            box.innerHTML=""
            for(i in all){
                var newDiv=document.createElement("div")
                newDiv.innerHTML=all[i]
                box.appendChild(newDiv)
            }
        }

        button[1].onclick=function(){
            all.sort(function(a,b){
            return a-b;
             })
            box.innerHTML=""
            for(i in all){
                var newDiv=document.createElement("div")
                newDiv.innerHTML=all[i]
                box.appendChild(newDiv)
            }
        }

        // console.log(all)

    </script>
</body>
</html>

CSS样式

*{
   padding:0;
   margin:0;
}
ul,li{
   list-style:none;
}
a{
   text-decoration:none;
}
html body{
   font-family:"微软雅黑";
}

基于电商网站上的商品价格从高到低从低到高基本原理

猜你喜欢