js获取数值并插入（加了一些限制条件）-CSDN博客

在js获取数值并插入的基础上加入一些限制条件

part1

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

左侧入：
- 对输入字符判断是否符合要求
- 若是，则读取ul 这里注意ul=document.getElementsByTagName("ul")[0]要有[0]，
- 判断ul子节点数 ul.childElementCount 是否不超过60
- 若是，创建新的li,
- 设置li的高度为"输入数字px",
- 将li添加到ul开头

左侧出
- rua 突然变简单了 (゜-゜)つロ /刚才看了删除节点操作
- ul貌似跟其他标签不一样？ul比较特殊？非得加个[0]才行
排排序
- 我一定要用快排>_<！！！
- 嗯，又学了几遍快排，还学了一个方法，JavaScript有concat()方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
- 打扰了。。还是直接用sort()，真香.jpg

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>获取数值并插入</title>
    <style type="text/css">
    li{
        
        list-style: none;
        margin:10px;
        display: inline-block;
        background: red;
        padding:10px;
        color:#fff;
    }

    </style>
    <script type="text/javascript">
        var arr=[];
        function judge_input(num){
            
            if(num>=10&&num<=100){
                
                return true;   
            }
            else {
                alert("请输入范围在10~100的数字！");
                return false;
            }
        } 
        function left_in(){
            var num=document.getElementById('number').value;
            
            if(judge_input(num)){
            var ul=document.getElementsByTagName("ul")[0];
            if(ul.childElementCount>=60){
                alert("元素数量超过60了！！！");
            }
            else {
                var newli=document.createElement("li");
                newli.style.height=num+"px";
                ul.insertBefore(newli,ul.childNodes[0]);
            }
            }
            
        }
        function right_in(){
            var num=document.getElementById('number').value
            if(judge_input(num)){
                var ul=document.getElementsByTagName("ul")[0];
                if(ul.childElementCount>=60){
                    alert("元素数量超过60了！！！");
                }
                else {
                    var newli=document.createElement("li");
                    newli.style.height=num+"px";
                    ul.appendChild(newli);
            }
            }
        }
        function left_out(){
            arr.shift();
            var ul=document.getElementsByTagName("ul")[0];
            ul.removeChild(ul.children[0]);
        }
        function right_out(){
            arr.pop();
            var ul=document.getElementsByTagName("ul")[0];
            ul.removeChild(ul.children[ul.childElementCount-1]);
        }
          
        window.onload=function(){
            document.getElementById("sort").onclick=function(){
            var ul=document.getElementById("showNum");
            var ali=document.getElementsByTagName("li");
            var arr=[];

           //转数组
           for(var i=0;i<ali.length;i++){
               arr[i]=ali[i];
           }
           //排序
           arr.sort(function(li1,li2){
               return parseInt(li1.style.height)-parseInt(li2.style.height);
           });
           //重新载入
           for(var i=0;i<arr.length;i++){
               
               ul.appendChild(arr[i]);
           }
       }
        }
    </script>
</head>
<body>
        <input type="text" id="number" name="input" placeholder="请输入数值(范围10~100)"/>
        <input type="button" value="左侧入" id="left_in" onclick="left_in() " />
        <input type="button" value="右侧入" id="right_in" onclick="right_in()" />
        <input type="button" value="左侧出" id="left_out" onclick="left_out()" />
        <input type="button" value="右侧出" id="right_out" onclick="right_out()" />
        <input type="button" value="排序" id="sort" >
        <ul id="showNum">
           
        </ul>

</body> 
</html>
复制代码