希尔排序(Shell Sort)是插入排序的一种。也称缩小增量排序，是直接插入排序算法的一种更高效的改进版本。

如下图所示：

代码如下：

 <!DOCTYPE html>
 <html>
 <head>
     <title>The eleven 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 setShellSortValue() {
             var m = 0;//表示第几趟排序
             //d的值，4,2,1，表示增量
             for (var d = Math.floor(arrTmp.length / 2); d > 0; d = Math.floor(d / 2)) {
                 //第一次，d=4,循环次数，依次比较0,4/1,5/2,6/3,7
                 var atmp = new Array();
                 var n=0;
                 for (var i = d; i < arrTmp.length; i++) {
                    //如果第i个元素，小于第i-d个元素，则需要移动，否则不需要移动
                     if (arrTmp[i]<arrTmp[i - d] ) {
                         var j = i - d; //依次比较j和d+j个元素的大小
                         while (j >= 0) {
                             if (arrTmp[j] > arrTmp[d + j]) {
                                 var temp = arrTmp[j];
                                 arrTmp[j] = arrTmp[d + j];
                                 arrTmp[d + j] = temp;
                                 atmp[n]=(d + j);
                                 n=n+1;
                             }
                             j -= d;
                         }
                     }
                 }
                 m = m + 1;
                 //显示出来
                 for (var k = 0; k < arrTmp.length; k++) {
                     document.getElementById((m).toString() + k.toString()).innerText = arrTmp[k];
                     for(var n=0;n<atmp.length;n++){
                         if(atmp[n] ==k){
                         document.getElementById((m).toString() + (atmp[n]).toString()).setAttribute("class", "redball");
                         }
                     }
                 }
                 document.getElementById((m).toString() + "8").innerText = "第 " + (m).toString() + " 趟排序（d="+d+"）";

             }
         }

     </script>
 </head>
 <body>
 <header>
     <h1>希尔排序(Shell 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="Shell Sort" onclick="setShellSortValue();" />
 <br />
 <h3>希尔排序(Shell Sort)</h3>
 <ul>
     <li>希尔排序(Shell Sort)是插入排序的一种。也称缩小增量排序，是直接插入排序算法的一种更高效的改进版本。</li>
     <li>希尔排序是<mark>非稳定</mark>排序算法。</li>
     <li>希尔排序是把记录按下标的一定增量分组，对每组使用直接插入排序算法排序；随着增量逐渐减少，每组包含的关键词越来越多，当增量减至1时，整个文件恰被分成一组，算法便终止。</li>
     <li>一般的初次取序列的一半为增量，以后每次减半，直到增量为1。</li>
     <li>最后一个增量必须为1；</li>
     <li>时间复杂度和增量的设定有关介于O(nLogn)与O(n<sup>2</sup>)之间，一般O(n<sup>1.3</sup>)</li>
 </ul>
 </aside>
 <section id="mainArea">

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

Html5 希尔排序演示的更多相关文章

  1. python算法之希尔排序

    希尔排序 希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该方法因DL．Shell于1959年提出而得名. 希尔 ...

  2. 希尔排序——Java实现

    一.排序思想 希尔排序(Shell’s Sort)是插入排序的一种,是直接插入排序算法的一种更高版本的改进版本. 把记录按步长gap分组,对每组记录采用直接插入排序方法进行排序: 随着步长逐渐减小,所 ...

  3. 希尔排序（Shell's Sort）的C语言实现

    原创文章,转载请注明来自钢铁侠Mac博客http://www.cnblogs.com/gangtiexia 希尔排序(Shell's Sort)又称“缩小增量排序”(Diminishing Incre ...

  4. 排序算法--希尔排序(Shell Sort)_C#程序实现

    排序算法--希尔排序(Shell Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来非常困难 ...

  5. 希尔排序Shell sort

    希尔排序Shell Sort是基于插入排序的一种改进,同样分成两部分, 第一部分,希尔排序介绍 第二部分,如何选取关键字,选取关键字是希尔排序的关键 第一块希尔排序介绍 准备待排数组[6 2 4 1 ...

  6. 我的Java开发学习之旅------>Java经典排序算法之希尔排序

    一.希尔排序(Shell Sort) 希尔排序(Shell Sort)是一种插入排序算法,因D.L.Shell于1959年提出而得名. Shell排序又称作缩小增量排序. 二.希尔排序的基本思想 希尔 ...

  7. 希尔排序法及其js实现

    希尔(Shell)排序又称为缩小增量排序,它是一种插入排序.它是直接插入排序算法的加强版. 希尔增量: 希尔增量是指希尔提出了一种冲破二次时间屏障的算法. Donald Shell 提出了一种冲破二次 ...

  8. 数据结构与算法系列——排序(4)_Shell希尔排序

    1. 工作原理(定义) 希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本.但希尔排序是非稳定排序算法. 希尔排序的基本思想是:先将整个待排序的记录序列分割成为若干子序列分别进行直接插入 ...

  9. C数据结构排序算法——希尔排序法用法总结（转http://www.cnblogs.com/skywang12345/p/3597597.html）

    希尔排序介绍 希尔排序(Shell Sort)是插入排序的一种,它是针对直接插入排序算法的改进.该方法又称缩小增量排序,因DL．Shell于1959年提出而得名. 希尔排序实质上是一种分组插入方法.它 ...

随机推荐

  1. .Net多线程编程—并发集合

    并发集合 1 为什么使用并发集合? 原因主要有以下几点: System.Collections和System.Collections.Generic名称空间中所提供的经典列表.集合和数组都不是线程安全 ...

  2. Centos 下 mysql root 密码重置

    重置mysql密码的方法有很多,官网也提供了很方便的快捷操作办法,可参考资料 resetting permissions .本文重置密码的具体步骤如下: 一.停止MySQL(如果处于运行状态) #se ...

  3. org.jboss.deployment.DeploymentException: Trying to install an already registered mbean: jboss.jca:service=LocalTxCM,name=egmasDS

    17:34:37,235 INFO [Http11Protocol] Starting Coyote HTTP/1.1 on http-0.0.0.0-8080 17:34:37,281 INFO [ ...

  4. 【从零开始学BPM，Day5】报表配置及自定义功能页面开发

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第五天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

  5. crontab介绍

    1.Cron的启动与关闭 由于Cron是Linux的内置服务,可以用以下的方法启动.关闭这个服务: /sbin/service crond start           //启动服务/sbin/se ...

  6. 2-1 Linux 操作系统及常用命令

    根据马哥linux初级视频 2-1.2-2来编辑 1. GUI与CLI GUI: Graphic User Interface CLI: Command Line Interface 注:在Windo ...

  7. 瞬间记住Javascript中apply与call的区别

    关于Javascript函数的apply与call方法的用法,网上的文章很多,我就不多话了.apply和call的作用很相似,但使用方式有区别 apply与call的第一个参数都是一个对象,这个对象就 ...

  8. logstash服务启动脚本

    logstash服务启动脚本 最近在弄ELK,发现logstash没有sysv类型的服务启动脚本,于是按照网上一个老外提供的模板自己进行修改 #添加用户 useradd logstash -M -s ...

  9. 在CentOS上构建.net自动化编译环境

             我们知道在Windows上我们很容易构建于MSBuild的自动化编译环境,那么在CentOS也是可以的,主要是需要Mono. 在这儿我们选择Jenkins+Gitlab+Mono在C ...

  10. 【初码干货】在Window Server 2016中使用Web Deploy方式发布.NET Web应用的重新梳理

    在学习和工作的过程中,发现很多同事.朋友,在做.NET Web应用发布的时候,依然在走 生成-复制到服务器 这样的方式,稍微高级一点的,就是先发布到本地,再上传到服务器 这种方式不仅效率低下,而且不易 ...