学步园

<div id="showLine">&nbsp;
</div>
<input name="HBCreateLine" type="button" value="生成线" onclick="HBCreateLineFunction()">
<input name="HBBubArrange" type="button" value="冒泡排序" onclick="HBBubArrangeFunction(0)">
<script language=javascript>
 function HBCreateLineFunction()
 {
  var LineArray=new Array()//生成一个数组用来存放线
  for(var i=0;i<50;i++)
  {
   LineArray[i]="<hr align='left' style='width:"+Math.ceil(Math.random()*1000)+"' color='red'>"
  }
  document.getElementById("showLine").innerHTML=LineArray.join("")//把线打印到页面上
 }
 function HBBubArrangeFunction(index)
 {
  var objs=document.getElementsByTagName("hr")
  var flag=false;//设置一个变量用来判断是否有交换
  var temp;
  for(var i=0;i<50-index-1;i++)
  {
   if(parseInt(objs[i].style.width)>parseInt(objs[parseInt(i)+parseInt(1)].style.width))//判断大小，交换数据
   {
     temp=objs[i].style.width;objs[i].style.width=objs[parseInt(i)+parseInt(1)].style.width;objs[parseInt(i)+parseInt(1)].style.width=temp;
     flag=true;
   }
  }
  if(flag&&index<49)
  {
   index++;
   setTimeout("HBBubArrangeFunction("+index+")",2000)
  }
  else
  {
   alert("结束")
  }
  
 }
</script>