Html5 冒泡排序演示

本文通过一个简单的小例子,简述冒泡算法在B/S中的简单使用,仅供学习分享使用,如有不足之处,还请指正。

概述

冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。

它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。

这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端,故名。

效果图

本例是用Html展示,冒泡排序的例子,如下图所示:

核心算法

由于此算法相对比较简单,对此不再赘述,代码如下:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>The nineth html page</title>
  5     <style type="text/css">
  6         ul li
  7         {
  8             list-style-type:georgian;
  9             text-align:left;
 10          }
 11         .mark
 12         {
 13             width:140px;
 14             height:40px;
 15             color:Olive;
 16             text-align:center;
 17             line-height:40px;
 18             margin:5px;
 19             float:left;
 20          }
 21           .redball
 22         {
 23             width:40px;
 24             height:40px;
 25             border-radius:20px;
 26             background-color:Red;
 27             text-align:center;
 28             line-height:40px;
 29             margin:5px;
 30             float:left;
 31         }
 32         .ball
 33         {
 34             width:40px;
 35             height:40px;
 36             border-radius:20px;
 37             background-color:Aqua;
 38             text-align:center;
 39             line-height:40px;
 40             margin:5px;
 41             float:left;
 42         }
 43         .line
 44         {
 45             clear:left;
 46          }
 47         header
 48         {
 49             height:80px;
 50             border:1px solid gray;
 51         }
 52         .left
 53         {
 54             border:1px solid gray;
 55             float:left;
 56             width:30%;
 57             height:480px;
 58             margin-left:0px;
 59             margin-right:0px;
 60             
 61         }
 62         aside
 63         {
 64             text-align:center;
 65         }
 66         section
 67         {
 68             width:69.5%;
 69             float:left;
 70             height:480px;
 71             border:1px solid gray;
 72             margin-left:0px;
 73             margin-right:0px;
 74         }
 75         footer
 76         {
 77             clear:left;
 78             height:60px;
 79             border:1px solid gray;
 80         }
 81         input[type="button"]
 82         {
 83             width:80px;
 84             text-align:center;
 85             margin-top:10px;
 86          }
 87     </style>
 88     <script type="text/javascript">
 89         function initDiv() {
 90             var mainArea = document.getElementById("mainArea");
 91             for (var i = 0; i < 8; i  ) {
 92                 var newDivLine = document.createElement("div");
 93                 newDivLine.setAttribute("class", "line");
 94                 mainArea.appendChild(newDivLine);
 95                 for (var j = 0; j < 9; j  ) {
 96                     var newDiv = document.createElement("div");
 97                     var id = i.toString()   j.toString();
 98                     newDiv.setAttribute("id", id);
 99                     if(j<8){
100                         newDiv.setAttribute("class", "ball");
101                     }else{
102                         newDiv.setAttribute("class", "mark");
103                     }
104                     newDivLine.appendChild(newDiv);
105                 }
106             }
107         }
108  
109         //初始元素赋值
110         var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];
111         function setElementsValue() {
112             for (var i = 0; i < arrTmp.length; i  ) { 
113                 document.getElementById("0" i.toString()).innerText=arrTmp[i];
114             }
115             document.getElementById("08").innerText="原始数据";
116         }
117 
118         //冒泡排序
119         function setBubbleSortValue() {
120             for (var i = 0; i < arrTmp.length-1; i  ) {
121                 for (var j = 0; j < arrTmp.length - 1 - i; j  ) {
122                     if (arrTmp[j] > arrTmp[j   1]) {
123                         var tmp = arrTmp[j   1];
124                         arrTmp[j   1] = arrTmp[j];
125                         arrTmp[j] = tmp;
126                     }
127                 }
128                 //显示出来
129                 for (var k = 0; k < arrTmp.length; k  ) {
130                     document.getElementById((i   1).toString()   k.toString()).innerText = arrTmp[k];
131                     if (i   k == arrTmp.length - 1) {
132                         document.getElementById((i   1).toString()   k.toString()).setAttribute("class", "redball");
133                     }
134                 }
135                 document.getElementById((i   1).toString()   "8").innerText = ""   (i   1).toString()   " 排序";
136             }
137         }
138 
139     </script>
140 </head>
141 <body>
142 <header>
143     <h1>Bubble Sort Demo</h1>
144 </header>
145 <aside class="left">
146 
147 <input type="button" id="btnInit" value="Init" onclick="initDiv();" />
148 <br />
149 <input type="button" id="btnSetValue" value="SetValue" onclick="setElementsValue();" />
150 <br />
151 <input type="button" id="btnBubble" value="BubbleSort" onclick="setBubbleSortValue();" />
152 <br />
153 <h3>冒泡排序(Bubble Sort</h3>
154 <ul>
155     <li>比较相邻的元素。如果第一个比第二个大,就交换他们两个。</li>
156     <li>对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。</li>
157     <li>针对所有的元素重复以上的步骤,除了最后一个。</li>
158     <li>持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较</li>
159 </ul>
160 </aside>
161 <section id="mainArea">
162     
163 </section>
164 <footer>
165     这是底部信息
166 </footer>
167 </body>
168 </html>
View Code

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Codeforces 765F. Souvenirs

Description 给出长度为 \(n\) 的序列,有 \(Q\) 组询问,问 \(|a_i-a_j|\),\(l<i,j<r\)的最小值是多少?题面 Solution 无删莫队. 把询问按照左端点分块,同一块内按右端点递增排序,类似于莫队 问题在于回溯: 直接删除的话无法更新最小值,但是可以一边插入一边删除 这样我们…

学习六 - Python 函数

Python 学习 - 函数 1.创建和调用函数 创建函数 def function_name(): #无参数函数xxxdef function_name(par1, par2, ...): #带参数函数xxx记住三个关键的东西&#xff1a;def, (), : 调用 function_name() #无参数函数调用function_name(arg1, arg2, ...) #带参数函数…

一种编写测试的好方法

测试。 最近我一直在考虑进行测试。 作为我对各种项目所做的代码审查的一部分&#xff0c;我已经看到了数千行未经测试的代码。 这不仅是测试覆盖率统计数据指出这一点的情况&#xff0c;还更多是该项目中根本没有任何测试的情况 。 我一直听到这种悲惨状况的两个原因&#xff…

rem、px、em之间的区别以及网页响应式设计写法

个人收藏用&#xff0c;转载自&#xff1a;http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小&#xff0c;至今天为止都还在激烈的争论着&#xff0c;有人说PX做为单位好&#xff0c;有人说EM优点多&#xff0c;还有人在说…

游戏服务器架构图

1&#xff1a;ARPG类型游戏 2:MMORPG 3:MOBA 4:卡牌类 5&#xff1a;棋盘类 转载于:https://www.cnblogs.com/like-minded/p/8297718.html

php 解析http,用PHP手动解析原始HTTP数据

好的&#xff0c;所以Dave和Everts的建议我决定手动解析原始请求数据。搜索约一天后&#xff0c;我没有找到任何其他方式来做到这一点。我从这个thread获得了一些帮助。我没有任何运气篡改原始数据&#xff0c;就像在引用的线程中一样&#xff0c;因为这将破坏正在上传的文件。…

长为N的数组,元素范围是0-N-1,其中只有一个数是重复的,找出这个重复元素...

思路&#xff1a;如果限制空间复杂度为O&#xff08;1&#xff09;&#xff0c;我们就无法采用哈希表的方法去求解。题目中数组中所以数字都在范围[0&#xff0c; N-1]&#xff0c;因此哈希表的大小为N即可。因此我们实际要做的就是对N个范围为0到N-1的数进行哈希&#xff0c;而…

测试Spring的“会话”范围

在基于Spring的Web应用程序中&#xff0c;bean的作用域可以是用户“会话”。 从本质上讲&#xff0c;这意味着对会话范围的Bean的状态更改仅在用户会话范围内可见。 此项的目的是简单地突出显示Spring Test MVC提供的一种方法&#xff0c;以测试将会话范围的bean作为依赖项的组…

Sass学习之路(3)——Sass编译

Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤&#xff0c;因为".sass"和".scss"文件并不能直接使用<link>标签引用&#xff0c;最终其实还是要将他们转换成CSS文件来在项目中使用。 所以要让web页面真正使用到Sass缩写的东西&#xff0…

爬虫练习一(爬取笑话集)

爬取笑话集网页 目标网址为&#xff1a;http://www.jokeji.cn/list.html 感觉这个网站挺简单&#xff0c;不用登陆&#xff0c;没有复杂的功能&#xff0c;好爬~ 可以现在浏览器中访问这个链接看一下效果&#xff0c;你会发现这个页面是个目录&#xff0c;有很多笑话页面的链接…

Huffman树学习

一篇很好的博客 转载于:https://www.cnblogs.com/cjoierljl/p/9319902.html

JAVA第六章第6题,java第六章例题源代码

《JavaWeb 程序设计》 练习题参考答案 第一章:Servlet 基础 1、下列选项中属于...由于 PHP 开放源 代码,并且是免费的,所以非常流行,是当今 Internet 上最为火热......JAVA 编程实例大全及详解答案(50 例) 【程序 1】题目:古典问题:有一对...9、Java 中一个字符占用两个 字节,所…

GlassFish 4带来了Java EE 7

真是惊喜 除了推出新的iOS 7外&#xff0c;苹果在wwdc上什么也没提供。 碰巧的是&#xff0c;在他们的主题演讲后不久&#xff0c;又有7个人正式露面。 GlassFish 4.0已于昨天晚上发布&#xff08;显然是不需要的&#xff09;。 新的Java EE 7参考实现自动成为当今第一个可用的…

bootstrap的栅格布局与两列布局结合使用

在工作中我们常常需要实现响应式布局&#xff0c;这个可以使用bootstrap的栅格系统来实现&#xff0c;我们在列里也需要实现一部分的响应式。比如下面的效果图&#xff0c;需要实现左边图标固定&#xff0c;右边的自适应 &#xff1a; 左边固定宽度&#xff0c;右边自适应&…

软件测试初学记录——第一章

阅读软件测试记要 什么是软件测试&#xff1a; 以找出软件中不符合需求而去操作软件的过程称为软件测试。 软件测试员的工作&#xff1a; 软件测试员的目标是尽早的发现软件缺陷&#xff0c;并确保其被修复。 软件缺陷是什么&#xff1a; 不符合需求文档或导致软件不能正常运行…

matlab命令 脑电波,基于Matlab的脑电波信号处理

做脑电波信号处理滴嘿嘿。。Matlab addictedCodes%FEATURE EXTRACTERfunction [features] EEGfeaturetrainmod(filename,m)a 4;b 7;d 12;e 30;signals 0;for index 1:9; % read in the first ten EEG data because the files are numbered as ha11test01 rather than ha…

JavaScript内置对象Date常用函数

// //获取当前时间// var dt new Date();// alert(dt);// //传入时间// var dt1 new Date("2017-08-12");// alert(dt1);//// //获取时间的对象(毫秒)// var dt2 Date.now();// alert(dt2);//// …

JVM性能魔术技巧

HotSpot是我们众所周知和喜爱的JVM&#xff0c;是Java和Scala汁流淌的大脑。 多年来&#xff0c;许多工程师对其进行了改进和调整&#xff0c;并且在每次迭代中&#xff0c;其代码执行的速度和效率都接近本机编译代码。 JIT&#xff08;“即时”&#xff09;编译器是其核心。…

移动端1px

移动端不同尺寸设备dpi不同&#xff0c;会造成1px线条不同程度的缩放&#xff0c;可利用媒体查询device-pixel-ratio&#xff0c;进行不同情况匹配&#xff1a; media&#xff08;-webkit-min-device-pixel-ratio:1.5&#xff09;,(min-device-pixel-ratio:1.5){//dpi:1.5 .bo…

mysql 10个日期,MySQL自学篇(10)——日期函数

MySQL自学篇(十)——日期函数日期和时间函数(1)获取当前日期的函数和时间的函数CURDATE()和CURRENT_DATE()函数&#xff0c;获取当前日期select current_date(),curdate(),curdate()0;curdate()0 表示将当前时间转化为数值型CURTIME()和CURRENT_TIME()获取当前时间select cur…