希尔排序(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. 初识Hadoop、Hive

    2016.10.13 20:28 很久没有写随笔了,自打小宝出生后就没有写过新的文章.数次来到博客园,想开始新的学习历程,总是被各种琐事中断.一方面确实是最近的项目工作比较忙,各个集群频繁地上线加多版 ...

  2. boosting、adaboost

    1.boosting Boosting方法是一种用来提高弱分类算法准确度的方法,这种方法通过构造一个预测函数系列,然后以一定的方式将他们组合成一个预测函数.他是一种框架算法,主要是通过对样本集的操作获 ...

  3. MVVM模式和在WPF中的实现（一）MVVM模式简介

    MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...

  4. java中servlet的各种路径

    1. web.xml中<url-pattern>路径,(叫它Servlet路径!) > 要么以“*”开关,要么为“/”开头 2. 转发和包含路径 > *****以“/”开头:相 ...

  5. 再谈CAAnimation动画

    CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...

  6. HTML文档头部

    前面的话   在声明文档类型之后,HTML文档的下一部分为<html>标签,告知浏览器应将括在<html>...</html>内的所有内容解析为HTML.然后是HT ...

  7. 浏览器中用JavaScript获取剪切板中的文件

    本文转自我的个人网站  , 原文地址:http://www.zoucz.com/blog/2016/01/29/get-file-from-clipboard/  ,欢迎前往交流讨论 在网页上编辑内容 ...

  8. Jvm 内存浅析 及 GC个人学习总结

    从诞生至今,20多年过去,Java至今仍是使用最为广泛的语言.这仰赖于Java提供的各种技术和特性,让开发人员能优雅的编写高效的程序.今天我们就来说说Java的一项基本但非常重要的技术内存管理 了解C ...

  9. 去IOE的一点反对意见以及其他

    某天在机场听见两老板在聊天,说到他们目前销售的报表老跟不上的问题,说要请一个人,专门合并和分析一些发过来的excel表格,我真想冲上去说,老板,你需要的是一个信息处理的系统,你需要咨询么.回来一直耿耿 ...

  10. MySQL ALTER命令

    当我们需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. 开始本文教程前让我们先创建一张表,表名为:testalter_tbl. root@host# mysql -u r ...