javascript实现基本数据结构（一）冒泡排序

最新推荐文章于 2023-02-19 12:16:20 发布

hbhbhbhbhb1021

最新推荐文章于 2023-02-19 12:16:20 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 数据结构 button function input div

本文链接：https://blog.youkuaiyun.com/hbhbhbhbhb1021/article/details/1103312

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的冒泡排序算法，并通过动态生成的线条来直观展示排序的过程。具体包括如何生成随机宽度的线条并进行比较与交换，最终完成排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="showLine"> 
</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>