希尔排序(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. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  2. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. Xshell 连接CentOS服务器解密

    平台之大势何人能挡? 带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4822808.html Xshell生成密钥key(用于Linux 免密码登录)htt ...

  4. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  5. H3 BPM引擎API接口

    引擎API接口通过 Engine 对象进行访问,这个是唯一入口. 示例1:获取组织机构对象 this.Engine.Organization.GetUnit("组织ID"); 示例 ...

  6. Android开发学习—— 创建项目时，不是继承activity，而是继承ActionBarActivity

    对于我们新建android项目时, 会 继承ActionBarActivity. 我们在新建项目时, 最小需求的sdk 选择 4.0以上版本.这样 新建的android项目就是继承activity了!

  7. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  8. Set up VLAN (802.1q) tagging on a network interface?

    SOLUTION VERIFIED October 13 2015 KB39674 KB741413 environment Red Hat Enterprise Linux 4 Red Hat En ...

  9. CSS命名规范——BEM思想（非常赞的规范）

    人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...

  10. test

    http://img.ivsky.com/img/bizhi/pic/201009/07/fangaoyouhua-015.jpghttp://desk.fd.zol-img.com.cn/t_s16 ...