SOURCE

function add_left(data) {
            var b=document.getElementById("div1");
            var div =document.createElement("div");
            if(document.getElementsByClassName("div2").length<61){
            div.id="div2";
            div.className="div2";
                div.style.width="15px";
                div.style.background=randomcolor();
                var data2=parseInt(data)*3;
                div.style.height=data2+"px";
            b.insertBefore(div,b.firstChild);
         }
         else{alert("数量超过60个")}
        }
        function randomcolor() {
            var c="#";
            var temp=["1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
            for(var n=0;n<6;n++){
                c+=temp[Math.round(Math.random()*15)];
            }
            return c;
        }
        function add_right(data) {
            var b=document.getElementById("div1");
            var div =document.createElement("div");
            if(document.getElementsByClassName("div2").length<61){
            div.id="div2";
            div.className="div2";
            div.style.background=randomcolor();
            div.style.width="15px";
            var data2=parseInt(data)*3;
            div.style.height=data2+"px";
            b.appendChild(div);
        }
        else{alert("数量超过60个")}
        }
        function onclick() {
          var btn1 =  document.getElementById("btn1");
          btn1.addEventListener("click",function () {
              var text = document.getElementById("text");
              if (text.value==""){alert("请输入11-99！")}
              else if(!isNaN(text.value)&&text.value<100&&10<text.value){
                  add_left(text.value);
                  text.value="";
              }
              else if(100<=text.value||text.value<=10){
                  alert("输入11-99！")
                  text.value="";
              }
              else{alert("请输入11-99！")}
          })
            var btn2 =  document.getElementById("btn2");
            btn2.addEventListener("click",function () {
                var text = document.getElementById("text");
                if (text.value==""){alert("请输入11-99！")}
                else if(!isNaN(text.value)&&text.value<100&&10<text.value){
                    add_right(text.value);
                    text.value="";
                }
                else if(100<=text.value||text.value<=10)
                {
                    alert("输入11-99！")
                    text.value="";
                }
                else{alert("请输入11-99！")}
            })
            var btn3 =  document.getElementById("btn3");
            btn3.addEventListener("click",function () {
                var div1 = document.getElementById("div1");
                div1.removeChild(div1.firstChild);
            })
            var btn4 =  document.getElementById("btn4");
            btn4.addEventListener("click",function () {
                var div1 = document.getElementById("div1");
                div1.removeChild(div1.lastChild);
            })
            var btn5 =  document.getElementById("btn5");
            btn5.addEventListener("click",function () {
                bubble_sort();
            })
            var btn6 =  document.getElementById("btn6");
            btn6.addEventListener("click",function () {
                getRandomNum();
            })
        }
        function bubble_sort() {
            var height=[];
            var b=document.getElementById("div1").childNodes;
            for(var i=0;i<b.length;i++){
                var c=b[i].offsetHeight;
                height[i]=c;
            }
           var n=0,m=0,p=height.length;
         l =  setInterval(function () {
              var temp=height[m];
               if(temp>height[m+1]){
                   height[m]=height[m+1];
                   height[m+1]=temp;
               }
               document.getElementById("div1").innerHTML="";
               for(var o=0;o<height.length;o++)
             {
                 add_left(height[o]/3);
             }
             if(p==0){
                 clearInterval(l);
             }
             m++;
               if(m==height.length-n){
                   n++;
                   p--;
                   m=0;
               }
           },1)
        }
        function getRandomNum() {
            var q =document.getElementById("div1").innerHTML="";
            for(var m=0;m<60;m++)
            {
                var randomNum = Math.floor(Math.random()*91+10);
                add_left(randomNum);
            }
        }
         onclick();

<div id="div10">
    <input type="text" id="text"  >
    <input type="button" id="btn1" value="左侧入">
    <input type="button" id="btn2" value="右侧入">
    <input type="button" id="btn3" value="左侧出" >
    <input type="button" id="btn4" value="右侧出">
    <input type="button" id="btn5" value="冒泡">
    <input type="button" id="btn6" value="生成随机数">
</div>

<div id="div3">
    <br/>
<div id="div1">

</div>
</div>

#div2{
    float: left;
      width: auto;
     height: auto;
    margin-right: 10px;
    background:#B9887D;
    color: #FB966E;


  }