js练习之--特殊的排序、HTML Select标签的使用！

数组排序

• 这里并不要求使用sort()内置方法走捷径，但是这却不是捷径，这是一座大山！因为sort()及其的耗费性能，使用者拖出去打死！

  这里涉及到sort()的排序机制，如这样：

sort()函数会根据得到的布尔值决定是否交换，因此，可以给它传一个参数进去，那就是决定它是否交换的值!

var arr = [156,14,21,2];
arr.sort(function(a,b){
    return a - b;
    //如果 a-b>0 表示a>b 交换位置
    //如果 a-b<0 表示a<b 不交换位置
    //如果 a-b=0 也不交换位置
});

• 因此大家还是老老实实自己写一个排序函数吧，或者使用别人精炼的方法！
• 排序可以参考这个文章 常用排序算法总结(一)

HTML Select标签使用

• 先来看一下我的demo: 点击跳转

• 然后来看一下我的html代码，这是我的select标签部分:

<div class="cont-header">
    <span>选择排序方式:</span>
    <select name="" id="SortSelect" onchange="SelectedOnchange()">
        <option value="综合" Selected="selected" label="综合"></option>
        <option value="正排价格" label="正排价格"></option>
        <option value="返排价格" label="返排价格"></option>
        <option value="牛逼排" label="牛逼排"></option>
    </select>
</div>

这里的onchange="SelectedOnchange()"会触发js中的SelectedOnchange()方法！
+ 由于代码过长，就不都搬过来，可以去 这里 查看我的HTML完整代码；去 这里 查看我的css代码

select标签的onchange属性

• onchange属性是在每一次点开下来菜单，然后选中和当前不一样的option的时候才会触发；
• 当然，在触发onchange的时候可以给它一个函数，那么怎样可以实现不同的option触发不同的方法呢？

var arraySelect = document.querySelectorAll("#SortSelect>option");

function SelectedOnchange() {
    if (arraySelect[0].selected) {
        console.log("综合排啥排啊！不排！")
    } else if (arraySelect[1].selected) {
        priceOrder();
    } else if (arraySelect[2].selected) {
        priceReOrder();
    } else if (arraySelect[3].selected) {
        powerOrder();
    }
}

• 通过获取所有子节点的，然后判断子节点的Selected属性就可以啦！

所有的js代码

<script type="text/javascript">
    var everyContent = document.getElementsByClassName("imgItemsbox");
    var show = document.getElementById("imgcontent");
    var arraySelect = document.querySelectorAll("#SortSelect>option");

    //请忽略我为了在console中看的更清楚而设置的log,这些相关可以删除
    useAnimation()
    function SelectedOnchange() {
        if (arraySelect[0].selected) {
            console.log("综合排啥排啊！不排！")
        } else if (arraySelect[1].selected) {
            priceOrder();
        } else if (arraySelect[2].selected) {
            priceReOrder();
        } else if (arraySelect[3].selected) {
            powerOrder();
        }
    }

    var switchBridge;
    function priceOrder() {
        getArray();
        for (var x = 0; x < arrayPrice.length; x++) {
            for (var y = 0; y < arrayPrice.length; y++) {
                if (arrayPrice[x] < arrayPrice[y]) {
                    switchBridge = arrayPrice[x];
                    arrayPrice[x] = arrayPrice[y];
                    arrayPrice[y] = switchBridge;
                }
            }
        }
        var orderByPrice = "";
        show.innerHTML = competeHTMl(orderByPrice);
        useAnimation()
        console.log(arrayPrice);
    }
    // 价格返排
    function priceReOrder() {
        getArray();
        for (var x = 0; x < arrayPrice.length; x++) {
            for (var y = 0; y < arrayPrice.length; y++) {
                if (arrayPrice[x] > arrayPrice[y]) {
                    switchBridge = arrayPrice[x];
                    arrayPrice[x] = arrayPrice[y];
                    arrayPrice[y] = switchBridge;
                }
            }
        }

        var orderByPrice = "";
        show.innerHTML = competeHTMl(orderByPrice);
        useAnimation();
        console.log(arrayPrice);
    }
    // 权值排序
    function powerOrder() {
        getArray();
        for (var x = 0; x < arrayPrice.length; x++) {
            for (var y = 0; y < arrayPrice.length; y++) {
                if ((arrayPrice[x] * arrayPower[x]) > (arrayPrice[y] * arrayPower[y])) {
                    switchBridge = arrayPrice[x];
                    arrayPrice[x] = arrayPrice[y];
                    arrayPrice[y] = switchBridge;

                    switchBridge = arrayPower[x];
                    arrayPower[x] = arrayPower[y];
                    arrayPower[y] = switchBridge;
                }
            }

        }
        var orderByPrice = "";
        show.innerHTML = competeHTMl(orderByPrice);
        useAnimation();

        // 排序依据 权值*价格
        console.log(arrayPrice);
        console.log(arrayPower);
        var arrylog = [];
        for (var i = 0; i < arrayPrice.length; i++) {
            arrylog[i] = arrayPower[i] * arrayPrice[i];
        }
        console.log(arrylog);

    }

    var arrayPrice = [];
    var arrayPower = [];
    //获取价格数组 获取权值数组
    function getArray() {
        for (var i = 0; i < everyContent.length; i++) {
            arrayPower[i] = parseFloat(everyContent[i].children[1].childNodes[5].getAttribute("power"));
            arrayPrice[i] = parseFloat(everyContent[i].children[1].childNodes[5].innerText);
        }
    }
    function useAnimation() {
        for (var i = 0; i < everyContent.length; i++) {
            // 刷新加载动画
            everyContent[i].setAttribute("style", "animation-delay:" + i * 0.1 + "s;");
        }
    }

    // innerHTML赋值
    function competeHTMl(orderByPrice) {
        for (var x = 0; x < arrayPrice.length; x++) {
            for (var y = 0; y < arrayPrice.length; y++) {
                if (parseFloat(everyContent[y].children[1].childNodes[5].innerText) == arrayPrice[x]) {
                    orderByPrice += everyContent[y].outerHTML;
                }
            }
        }
        return orderByPrice;
    }
</script>

其实总的也是没事儿做着玩儿，自己加了一些东西让他不只是简单的排排序！让代码可以更有情趣一点！