斌斌学院JS-task5

任务目的

• 学习与实践JavaScript的基本语法、语言特性
• 练习使用JavaScript实现简单的排序算法

任务描述

• 基于上一任务
• 限制输入的数字在10-100
• 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
• 队列展现方式变化如图，直接用高度表示数字大小
• 实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化
  的方法表达出来，参考见下方参考资料

任务注意事项

• 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 示例图仅为参考，不需要完全一致
• 具体算法及可视化的形式不做特别限制，只要求能够展现出算法的过程
• 建议不使用任何第三方库、框架

实现思路

获取输入框中的数字，有in单击事件发生时创建孩子元素child，若数字合法添加孩子元素并将数字存入数组number[];out单击事件发生时，移除对应的child，并删除number[]中对应数字。sort单击事件发生时，对number的复制体排序，并显示在页面上。

Html代码

<label>请输入数字：
    <input id ='input' type="text" name="text" class="input"></label>
    <button id='left-in' class='in'><a href="###" class="hover">上侧入</a></button>
    <button id='right-in' class='in'><a href="###" class="hover">下侧入</a></button>
    <button id='left-out' class='out'><a href="###" class="hover">上侧出</a></button>
    <button id='right-out' class='out'><a href="###" class="hover">下侧出</a></button>
    <button id='sort_button'><a href="###" class="hover">排序</a></button>

<p>请查看输出：</p>
<div id='list'></div>
<div id='sort'></div>

Css代码

#sort_button,.input, .in,.out{
    background: #fff;
    border: 1px solid #e8e8e8;
    height:20px;
}
a{
    text-decoration:none;
    color:#000;
}
a:hover{
    color: #fc0000;
}
#left-out{
    margin:0 0 0 20px;
}
.in,.out{
    cursor:pointer;
}
#sort_button{
    margin: 0 0 0 20px;
}
#list{
    height:1000px;
    width:550px;
    float: left;
}
.display{
    display: block;
    height: 20px;
    margin: 8px 8px;
    background-color: #f00;
    color: #fff;
    line-height: 20px;
    cursor:pointer;
}
#sort{
    height:1000px;
    width:550px;
    float: right;
}

JS代码

var input = document.getElementById('input');
    var left_in = document.getElementById("left-in");
    var left_out = document.getElementById("left-out");
    var list_num = document.getElementById("list");
    var right_in = document.getElementById("right-in");
    var right_out = document.getElementById("right-out");
    var sort_button = document.getElementById("sort_button");
    var sort = document.getElementById("sort");
    var in_in = document.getElementsByClassName('in');
    var count = 0;
    var number = [];
    var flag_in = '';
    var flag_out = '';

    //添加数字
    right_in.onclick = function() {
        flag_in = 'right';
        in_();
    };
    left_in.onclick = function() {
        flag_in = 'left';
        in_();
    };
    //移除数字
    left_out.onclick = function() {
        flag_out = 'left';
        out();
    }
    right_out.onclick = function() {
        flag_out = 'right';
        out();
    }
    //点击数字删除
    list_num.onmouseover = function() {
            for (var i = 0; i < list_num.children.length; i++) {
                (function(n) {
                    list_num.children[n].onclick = function() {
                        list_num.removeChild(this);
                        number.splice(n,1);
                        ///alert(n);
                    }
                })(i)//创建闭包，传递index
            }
        }
        //点击排序
    sort_button.onclick = function() {
            sort.innerHTML = '';
            var num = number.slice();//复制number，操作num
            for (var i = 0; i < num.length; i++) {
                for (var j = 0; j < num.length - 1 - i; j++) {
                    if (num[j] > num[j + 1]) {
                        var temp = num[j];
                        num[j] = num[j + 1];
                        num[j + 1] = temp;
                    }
                }
                var add_sort = document.createElement('span')
                add_sort.className = 'display';
                add_sort.style.width = 20 + 5 * num[num.length - 1 - i] + 'px';
                add_sort.innerHTML = num[num.length - 1 - i];
                sort.appendChild(add_sort);
            }
        }
        //移除数字
    var out = function() {
        if (list_num.children.length > 0) {
            if (flag_out === 'left') {
                number.shift();
                list_num.removeChild(list_num.children[0]);
            }
            if (flag_out === 'right') {
                number.pop()
                list_num.removeChild(list_num.lastElementChild);
            }
        } else
            alert('没有数字了');
    }
//输入
    var in_ = function() {
        var value = input.value;
        var add = document.createElement('span')
        add.className = 'display';
        if (value >= 10 && value <= 100 && count <= 60) {
            add.style.width = 20 + 5 * value + 'px';
            add.innerHTML = value;
            if (flag_in === 'right') {
                list_num.appendChild(add);
                number.push(value);
            }
            if (flag_in === 'left') {
                list_num.insertBefore(add, list_num.firstElementChild);
                number.unshift(value);
            }
            count++;
        } else {
            alert('请输入不多于60个10-100之间的数字')
        }
        input.value = '';//清空输入框
    }

结果示意

1504148970(1).png

注意事项

• var num = number.slice();不可少。
  排序时，务必复制一份number数组，不要在原数组上操作，否则会破坏原有的顺序，因为number是全局的，in和out都能用到。
• input.value = '';而不是value=‘’。
  在in单击发生时，需要清空input框，代码中有一句var value = input.value;，清空时input.value = '';才对，不要顺手写了value=‘’。

本人前端小白一个，欢迎大家批评指正。