0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #ul{
            margin:  5px;
            list-style: none;
        }
        #ul li{
            float: left;
            width:  25px;
            background:  #aaa;
            margin:  5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<input type="text" id="content" autofocus placeholder="数字为 10-100" />
<button id="inset_left">左插入</button>
<button id="inset_right">右插入</button>
<button id="outset_left">左移除</button>
<button id="outset_right">右移除</button>
<button id="random_number">随机生成</button>
<button id="sort">排序</button>
<ul id="ul"></ul>

<script>
// 基于work4


function formatting(data){
    var arr = '';
    for (var i = 0; i <= data.length - 1; i++) {
        arr += '<li style="height:' + data[i] + '"></li>';
    }
    document.getElementById('ul').innerHTML = arr;
    document.getElementById('content').value = '';
    // del();
}


// 加入
function inset(direction){
    // 用 .children 选择中 ul 下的 li
    var li = document.getElementById('ul').children;
    // 判断li 队列数
    if ( li.length > 60) { 
        alert('队列至多60个'); 
        return false;
    }
    var text = document.getElementById('content').value;
    // 判断
    if ( isNaN(text) || text === '') {
        alert('请输入数字');
        return false;
    } else if( text >= 100 || text <= 10){
        alert('请输入10-100的数字');
        return false;
    }
    // 保存高度
    var highPx = text + 'px';
    var ul = document.getElementById('ul').innerHTML;
    if ( direction == 'left') {
        ul = '<li style="height:'+ highPx +'">'  + '</li>' + ul;
    } else if( direction == 'right'){
        ul = ul + '<li style="height:'+ highPx +'">'  + '</li>';
    }
    console.log(ul);
    document.getElementById('ul').innerHTML = ul;
    // 添加一次后 清空value
    // 这里用 text='' 的话不会清空value
    // 应该用 document.get....
    document.getElementById('content').value = '';
    // 添加一次后光标定回去
    document.getElementById('content').focus();
    //
    // formatting(data);
    // del();
}

// 删除
function outset(direction){
    // 用 .children 选择中 ul 下的 li
    var li = document.getElementById('ul').children;
    // 创建data 数组保存li
    var data = [];
    for (var i = 0; i < li.length ; i++) {
        data[i] = li[i].style.height;
    }
    var move;
    // 判断 左出 还 右出
    if (direction == 'left') {
        // shift() 删除数组第一个值,并返回
         move = data.shift();
    }else if (direction == 'right'){
        // pop() 删除数组最后一个值,并返回
         move = data.pop();
    }
    alert(move.slice(0,-2));
    formatting(data);
}



function del(){
    var del = document.getElementsByTagName('li');
    for (var i = 0; i < del.length ; i++) {
        del[i].addEventListener('click', function (){
            this.parentNode.removeChild(this);
        });
    }
}

/* 
    随机生成 
*/
function randomNum(times){
    var li = document.getElementById('ul').children;
    var random,
        data = [];
    if (isNaN(times) ) { return false; }
    for (var i = 0; i < times; i++) {
        data[i] = Math.ceil(Math.random() * 100) + 'px';
    }
    formatting(data);
}

function bubbleSort(){
    var li    = document.getElementById('ul').children;
    var items = [];
    var temp;
    for (var i = 0; i < li.length; i++) {
        items[i] = li[i].style.height.slice(0,-2);
        console.log(items);
    }
    for (var j = 0; j < items.length; j++) {
        for (var l = 0; l < items.length - j - 1; l++) {
            if ( items[l] > items[l+1] ){
                temp       = items[l];
                items[l]   = items[l+1];
                items[l+1] = temp;
            }     
        }
    }
        // console.log(items);
    // items 是去除了'px'的,应该要加回去
    var data = [];
    for (var k = 0; k < li.length; k++) {
        data[k] = items[k]+'px';
    }
    formatting(data);
}


// function bubbleSort(){
//     var li    = document.getElementById('ul').children;
//     var items = [];
//     for (var i = 0; i < li.length; i++) {
//         items[i] = li[i].style.height.slice(0,-2);
//     }
//     for (var j = 0; j < items.length; j++) {
//         for (var l = 0; l < items.length - j; l++) {
//             if ( items[l] > items[l+1] ){
//                 var temp   = items[l];
//                 items[l]   = items[l+1];
//                 items[l+1] = temp;
//             }
//         }
//     }
//     // items 是去除了'px'的,应该要加回去
//     var data = [];
//     for (var k = 0; k < li.length; k++) {
//         data[k] = items[k]+'px';
//     }
//     formatting(data);
// }




(function (){
    // 左入
    var btnInsetLeft = document.getElementById('inset_left');
    btnInsetLeft.addEventListener('click', function(){
        inset('left');
        del();
    });
    // 右入
    var btnInsetRight = document.getElementById('inset_right');
    btnInsetRight.addEventListener('click', function(){
        inset('right');
        del();
    });
    // 左出
    var btnOutsetLeft = document.getElementById('outset_left');
    btnOutsetLeft.addEventListener('click', function(){
        outset('left');
        del();
    });
    // 右出
    var btnOutsetRight = document.getElementById('outset_right');
    btnOutsetRight.addEventListener('click', function(){
        outset('right');
        del();
    });
    // 随机生成
    var btnRandomNumber = document.getElementById('random_number');
    btnRandomNumber.addEventListener('click', function(){
        randomNum(20); //  次数
        del();
    });
    // 排序
    var btnSort = document.getElementById('sort');
    btnSort.addEventListener('click',function(){
        bubbleSort();
        del();
    });
})();

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

我很奇怪,为什么我的bubbleSort 这个,他为什么先根据数字的第一位排序,然后再根据数字的第二位排序??
如下图:

什么原因?
我自己另外测试了都没发现这现象
是因为我从样式里 slice(0,-2) 舍弃了px 后取得的数字的问题?? 我是看不出来.... 很迷...
求指教
(要是我代码有什么问题的话...也可以提提... )

================
今天早上看《javascript高级程序设计》的时候看到了 字符串排序 就是我这样的, 所以要将它转为数字才对。
如第一位回答者所说的用 parseInt 可以转换为整型值,然后就没问题了。
MDN中对parseInt的解释

1个回答

1

已采纳

我把你自己质疑的那句代码加了个parseInt,正确了,你再试试哈。

137行:items[i] = parseInt(li[i].style.height.slice(0,-2));

撰写答案