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年提出而得名. 希尔排序实质上是一种分组插入方法.它 ...
随机推荐
- 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Linux CentOS 配置JDK环境
一.下载JDK 下载JDK的方式有两种: 1.Linux中使用wget下载 1.使用命令安装wget yum install wget 2.下载 wget 'http://download.oracl ...
- python爬取github数据
爬虫流程 在上周写完用scrapy爬去知乎用户信息的爬虫之后,github上star个数一下就在公司小组内部排的上名次了,我还信誓旦旦的跟上级吹牛皮说如果再写一个,都不好意思和你再提star了,怕你们 ...
- 用神奇的currentColor制作简洁的颜色动画效果
先上一个兼容性总结图:老版本ie可以直接用复杂方法了,套用某表情包的话: 2016年了,做前端你还考虑兼容IE6?你这简直是自暴自弃! 好了,知道了兼容性,我们可以放心的使用了. 在CSS3中扩展了 ...
- 【HanLP】资料链接汇总
Java中调用HanLP配置 HanLP自然语言处理包开源官方文档 了解HanLP的全部 自然语言处理HanLP 开源自由的汉语言处理包主页 GitHub源码 基于hanLP的中文分词详解-MapRe ...
- jQuery禁用或启用
禁用:.attr("disabled","disabled"); 启用:.removeAttr("disabled");
- MySQL 优化之 ICP (index condition pushdown:索引条件下推)
ICP技术是在MySQL5.6中引入的一种索引优化技术.它能减少在使用 二级索引 过滤where条件时的回表次数 和 减少MySQL server层和引擎层的交互次数.在索引组织表中,使用二级索引进行 ...
- Openstack Periodic Task
Openstack Periodic Task 周期性任务在各个模块的manager.py(computer,scheduler,cell,network)中添加. 添加方法:在模块manager类实 ...
- 08讲browse命令的使用技巧
.浏览所有parts ,使用技巧 .浏览所有 nets,使用技巧 在上图中选择nets .浏览所有 offpage connector,使用技巧 如上 .浏览所有 DRC makers,使用技巧 5. ...
- Vue.js——vue-resource全攻略
概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...