直接插入排序算法(Straight Insertion Sort)，是排序算法中简单的一种算法，基本思想如下：

将一个记录插入到已排序好的有序表中，从而得到一个新，记录数增1的有序表。即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。

要点：设立哨兵，作为临时存储和判断数组边界之用。

-----------------------------------------------------------------------------------------------------------

具体代码如下：

 <!DOCTYPE html>
 <html>
 <head>
     <title>The tenth html page</title>
  <style type="text/css">
         ul li
         {
             list-style-type:georgian;
             text-align:left;
          }
         .mark
         {
             width:140px;
             height:40px;
             color:Olive;
             text-align:center;
             line-height:40px;
             margin:5px;
             float:left;
          }
           .redball
         {
             width:40px;
             height:40px;
             border-radius:20px;
             background-color:Red;
             text-align:center;
             line-height:40px;
             margin:5px;
             float:left;
         }
         .ball
         {
             width:40px;
             height:40px;
             border-radius:20px;
             background-color:Aqua;
             text-align:center;
             line-height:40px;
             margin:5px;
             float:left;
         }
         .line
         {
             clear:left;
          }
         header
         {
             height:80px;
             border:1px solid gray;
         }
         .left
         {
             border:1px solid gray;
             float:left;
             width:30%;
             height:480px;
             margin-left:0px;
             margin-right:0px;

         }
         aside
         {
             text-align:center;
         }
         section
         {
             width:69.5%;
             float:left;
             height:480px;
             border:1px solid gray;
             margin-left:0px;
             margin-right:0px;
         }
         footer
         {
             clear:left;
             height:60px;
             border:1px solid gray;
         }
         input[type="button"]
         {
             width:80px;
             text-align:center;
             margin-top:10px;
          }
     </style>
     <script type="text/javascript">
         function initDiv() {
             var mainArea = document.getElementById("mainArea");
             for (var i = 0; i < 8; i++) {
                 var newDivLine = document.createElement("div");
                 newDivLine.setAttribute("class", "line");
                 mainArea.appendChild(newDivLine);
                 for (var j = 0; j < 9; j++) {
                     var newDiv = document.createElement("div");
                     var id = i.toString() + j.toString();
                     newDiv.setAttribute("id", id);
                     if (j < 8) {
                         newDiv.setAttribute("class", "ball");
                     } else {
                         newDiv.setAttribute("class", "mark");
                     }
                     newDivLine.appendChild(newDiv);
                 }
             }
         }

         //初始元素赋值
         var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];
         function setElementsValue() {
             for (var i = 0; i < arrTmp.length; i++) {
                 document.getElementById("0" + i.toString()).innerText = arrTmp[i];
             }
             document.getElementById("08").innerText = "原始数据";
         }

         //排序
         function setSISortValue() {
             for (var i = 1; i < arrTmp.length; i++) {
                 var m = 0;//为了记录插入的位置，方便标记
                 //若第i个元素大于i-1元素，直接插入。小于的话，移动有序表后插入
                 if (arrTmp[i] < arrTmp[i - 1]) {
                     var x = arrTmp[i]; //复制为哨兵(临时变量)，即存储待排序元素
                     var j = i - 1;
                     arrTmp[i] = arrTmp[i - 1]; //先后移一个元素 

                     //循环查找在有序表的插入位置，如果要插入的值小于，则继续查找，并将元素后移。
                     while (x < arrTmp[j]) {
                         arrTmp[j + 1] = arrTmp[j];
                         j--;
                     }
                     //查找完毕后，插入到正确位置（即要插入的值大于前面的元素）
                     arrTmp[j + 1] = x;
                     m = j + 1;
                 } else {
                     m = i;
                 }
                 //显示出来
                 for (var k = 0; k < arrTmp.length; k++) {
                     document.getElementById((i).toString() + k.toString()).innerText = arrTmp[k];
                     if (m == k) {
                         document.getElementById((i).toString() + (k).toString()).setAttribute("class", "redball");
                     }
                 }
                 document.getElementById((i).toString() + "8").innerText = "第 " + (i).toString() + " 趟排序";
             }
         }

     </script>
 </head>
 <body>
 <header>
     <h1>直接插入排序(Straight Insertion Sort)Demo</h1>
 </header>
 <aside class="left">

 <input type="button" id="btnInit" value="Init" onclick="initDiv();" />
 <br />
 <input type="button" id="btnSetValue" value="SetValue" onclick="setElementsValue();" />
 <br />
 <input type="button" id="btnSort" value="Sort" onclick="setSISortValue();" />
 <br />
 <h3>直接插入排序(Straight Insertion Sort)</h3>
 <ul>
     <li>将一个记录插入到已排序好的有序表中，从而得到一个新，记录数增1的有序表。</li>
     <li>即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。</li>
     <li>如果碰见一个和插入元素相等的，那么插入元素把想插入的元素放在相等元素的后面。所以，相等元素的前后顺序没有改变。</li>
     <li>从原无序序列出去的顺序就是排好序后的顺序，所以插入排序是稳定的。</li>
     <li>时间复杂度O(n<sup>2</sup>)</li>
 </ul>
 </aside>
 <section id="mainArea">

 </section>
 <footer>
     这是底部信息
 </footer>
 </body>
 </html>

Html5 直接插入排序的更多相关文章

  1. 用HTML5实现的各种排序算法的动画比较 及算法小结

    用HTML5实现的各种排序算法的动画比较 http://www.webhek.com/misc/comparison-sort/ 几种排序算法效率的比较 来源:http://blog.chinauni ...

  2. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  3. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  4. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  5. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  6. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  7. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  8. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  9. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

随机推荐

  1. JS核心系列：浅谈 call apply 与 bind

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  2. 终于等到你：CYQ.Data V5系列 （ORM数据层）最新版本开源了

    前言: 不要问我框架为什么从收费授权转到免费开源,人生没有那么多为什么,这些年我开源的东西并不少,虽然这个是最核心的,看淡了就也没什么了. 群里的网友:太平说: 记得一年前你开源另一个项目的时候我就说 ...

  3. 工欲善其事，必先利其器 之 VS2013全攻略(安装，技巧，快捷键，插件）！

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  4. AFNetworking 3.0 源码解读（六）之 AFHTTPSessionManager

    AFHTTPSessionManager相对来说比较好理解,代码也比较短.但却是我们平时可能使用最多的类. AFNetworking 3.0 源码解读(一)之 AFNetworkReachabilit ...

  5. 如何在Elasticsearch中安装中文分词器(IK+pinyin)

    如果直接使用Elasticsearch的朋友在处理中文内容的搜索时,肯定会遇到很尴尬的问题--中文词语被分成了一个一个的汉字,当用Kibana作图的时候,按照term来分组,结果一个汉字被分成了一组. ...

  6. sql server 取文件名函数 转载

    /****** Object: UserDefinedFunction [dbo].[GetDirectoryPath] Script Date: 2016-12-16 16:54:05 ****** ...

  7. ASP.NET Aries 4.0 开源发布：已完成基础功能优化重写

    主要更新: 1:增加AR.Global.GetUser() 方法返回当前登陆者的用户信息. 2:重写AR.Combobox 支持下拉树. 3:调整及扩展Input下拉的配置参数. 4:优化及新增AR. ...

  8. .NET跨平台：在Ubuntu上用自己编译的dnx运行ASP.NET 5示例程序

    在 Linux Ubuntu 上成功编译 dnx 之后,会在 artifacts/build/ 文件夹中生成 dnx-coreclr-linux-x64/ 与 dnx-mono/ 这2个文件夹,前者是 ...

  9. Akka.NET v1.0 已发布，支持Mono

    Akka.NET 是Java/Scala 流行框架Akka的一个 .NET 开源移植.可用于构建高并发,分布式和容错事件驱动的应用在 .NET 和 Mono 平台之上.Akka.NET 经过一年多的努 ...

  10. 使用ENode框架前您需要了解的东西（初稿）

    选择ENode意味着什么可能很多人还不太清楚.我简单整理了一下: 意味着你选择了:你需要做DDD领域建模.选择了事件驱动的架构.选择了CQRS架构.选择了最终一致性.选择了事件溯源.选择了分布式.这些 ...