Html5 希尔排序演示
希尔排序(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 希尔排序演示的更多相关文章
- python算法之希尔排序
希尔排序 希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该方法因DL．Shell于1959年提出而得名. 希尔 ...
- 希尔排序——Java实现
一.排序思想 希尔排序(Shell’s Sort)是插入排序的一种,是直接插入排序算法的一种更高版本的改进版本. 把记录按步长gap分组,对每组记录采用直接插入排序方法进行排序: 随着步长逐渐减小,所 ...
- 希尔排序（Shell's Sort）的C语言实现
原创文章,转载请注明来自钢铁侠Mac博客http://www.cnblogs.com/gangtiexia 希尔排序(Shell's Sort)又称“缩小增量排序”(Diminishing Incre ...
- 排序算法--希尔排序(Shell Sort)_C#程序实现
排序算法--希尔排序(Shell Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来非常困难 ...
- 希尔排序Shell sort
希尔排序Shell Sort是基于插入排序的一种改进,同样分成两部分, 第一部分,希尔排序介绍 第二部分,如何选取关键字,选取关键字是希尔排序的关键 第一块希尔排序介绍 准备待排数组[6 2 4 1 ...
- 我的Java开发学习之旅------>Java经典排序算法之希尔排序
一.希尔排序(Shell Sort) 希尔排序(Shell Sort)是一种插入排序算法,因D.L.Shell于1959年提出而得名. Shell排序又称作缩小增量排序. 二.希尔排序的基本思想 希尔 ...
- 希尔排序法及其js实现
希尔(Shell)排序又称为缩小增量排序,它是一种插入排序.它是直接插入排序算法的加强版. 希尔增量: 希尔增量是指希尔提出了一种冲破二次时间屏障的算法. Donald Shell 提出了一种冲破二次 ...
- 数据结构与算法系列——排序(4)_Shell希尔排序
1. 工作原理(定义) 希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本.但希尔排序是非稳定排序算法. 希尔排序的基本思想是:先将整个待排序的记录序列分割成为若干子序列分别进行直接插入 ...
- C数据结构排序算法——希尔排序法用法总结（转http://www.cnblogs.com/skywang12345/p/3597597.html）
希尔排序介绍 希尔排序(Shell Sort)是插入排序的一种,它是针对直接插入排序算法的改进.该方法又称缩小增量排序,因DL．Shell于1959年提出而得名. 希尔排序实质上是一种分组插入方法.它 ...
随机推荐
- docker——容器安装tomcat
写在前面: 继续docker的学习,学习了docker的基本常用命令之后,我在docker上安装jdk,tomcat两个基本的java web工具,这里对操作流程记录一下. 软件准备: 1.jdk-7 ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CoreCRM 开发实录——开始之新项目的技术选择
2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...
- bcp 命令实例
set sql_flow="select Id,',',ApplierName,',',FlowStatus,',',IsApproved,',',CreateTime from *** w ...
- IteratorPattern(迭代子模式)
/** * 迭代子模式 * @author TMAC-J * 聚合:某一类对象的集合 * 迭代:行为方式,用来处理聚合 * 是一种行为模式,用于将聚合本身和操作聚合的行为分离 * Java中的COLL ...
- 初识JavaScript
JavaScript ECMA-262: 变量,函数,对象,数据类型....唯独没有输入和输出. Javascript:包含 ECMA-262,核心 BOM 浏览器对象模型, DOM 文档对象模型 什 ...
- 第14章 Linux启动管理（2）_启动引导程序grub
2. 启动引导程序grub 2.1 Grub配置文件 (1)grub中分区的表示 硬盘 分区 Linux设备文件名 Grub中设备文件名 第1块SCSI硬盘 第1个主分区 /dev/sda1 hd(0 ...
- ABP框架 - 动态Web Api层
文档目录 本节内容: 创建动态Web Api控制器 ForAll 方法 重写 ForAll ForMethods Http 动词 WithVerb 方法 HTTP 特性 命名约定 Api 浏览器 Re ...
- Entity Framework 6 Recipes 2nd Edition（12-3）译 -> 数据库连接日志
12-3. 数据库连接日志 问题 你想为每次与数据库的连接和断开记录日志 解决方案 EF为DbContext的连接公开了一个StateChange 事件.我们需要处理这个事件, 为每次与数据库的连接和 ...