Html5 简单选择排序演示
简单选择排序,是选择排序算法的一种。基本思想:每趟从待排序的记录中选出关键字最小的记录,顺序放在已排序的记录序列末尾,直到全部排序结束为止。由于在每次循环中,会对数值相等的元素改变位置,所以属于非稳定排序。
---------------------------------------------------------------------
如下图所示:
对简单选择排序的优化方案,是采用二元选择排序,即将其改进为每趟循环确定两个元素(当前趟最大和最小记录)的位置,从而减少排序所需的循环次数。改进后对n个数据进行排序,最多只需进行[n/2]趟循环。
如下图所示:
算法原理,不再赘述,代码如下:
<!DOCTYPE html> <html> <head> <title>The thirteen html page</title> <style type="text/css"> ul li { list-style-type:georgian; text-align:left; } .mark { width:280px; 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:150px; text-align:center; margin-top:10px; } </style> <script type="text/javascript"> function initDiv() { var mainArea = document.getElementById("mainArea"); var childs = mainArea.childNodes; //添加节点之前先删除,应该从后往前删除,否则节点移动,只能删除一半 for (var i = childs.length - 1; i >= 0; i--) { mainArea.removeChild(childs[i]); } for (var i = 0; i < 8; i++) { var newDivLine = document.createElement("div"); newDivLine.setAttribute("class", "line"); newDivLine.setAttribute("id", i); 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); } } } //初始元素赋值 function setElementsValue() { var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1]; for (var i = 0; i < arrTmp.length; i++) { document.getElementById("0" + i.toString()).innerText = arrTmp[i]; } document.getElementById("08").innerText = "原始数据"; } //简单选择排序 function setSimpleSortValue() { var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1]; var m = 0;//表示要交换的最小坐标 for (var i = 0; i < arrTmp.length-1; i++) { m = i; for (var j = i + 1; j < arrTmp.length; j++) { if (arrTmp[m] > arrTmp[j]) { m = j; } } if (arrTmp[i] > arrTmp[m]) { var tmp = arrTmp[m]; arrTmp[m] = arrTmp[i]; arrTmp[i] = tmp; } //显示出来 for (var k = 0; k < arrTmp.length; k++) { document.getElementById((i+1).toString() + k.toString()).innerText = arrTmp[k]; if (i == k) { document.getElementById((i + 1).toString() + (k).toString()).setAttribute("class", "redball"); } else { document.getElementById((i + 1).toString() + (k).toString()).attributes["class"].nodeValue="ball";; } } document.getElementById((i+1).toString() + "8").innerText = "第 " + (i+1).toString() + " 趟排序(Min=" + arrTmp[i] + ")"; } } //二元选择排序 function setDoubleSelectSort() { var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1]; selectSortB(arrTmp); var len=arrTmp.length; for (var i = (len / 2)+1; i < len; i++) { for (var j = 0; j < 8; j++) { document.getElementById((i).toString() + (j).toString()).innerText = ""; document.getElementById((i).toString() + (j).toString()).className="ball"; } document.getElementById(i.toString() + "8").innerText = ""; } } //二元选择排序(升序) function selectSortB(a) { var len = a.length; var temp, min, max; for (var i = 0; i < len / 2; i++) { min = i; max = i; for (var j = i + 1; j <= len - 1 - i; j++) { max = (a[j] > a[max]) ? j : max;//每一趟取出当前最大和最小的数组下标 min = (a[j] < a[min]) ? j : min; }; temp = a[i];//先放小的 a[i] = a[min]; if (i == max) { //最大数在数组头部 if ((len - i - 1) !== min) {//最大数在头部,最小数在尾部 a[min] = a[len - i - 1]; } a[len - i - 1] = temp; } else if ((len - i - 1) === min) {//最大数不在头部,最小数在尾部 a[len - i - 1] = a[max]; a[max] = temp } else { //如果最大数在尾部,也是成立的,不用特殊讨论 a[min] = temp; temp = a[len - i - 1]; a[len - i - 1] = a[max]; a[max] = temp; } //显示出来 for (var k = 0; k < a.length; k++) { document.getElementById((i + 1).toString() + k.toString()).innerText = a[k]; if (i == k || len - i - 1 == k) { document.getElementById((i + 1).toString() + (k).toString()).setAttribute("class", "redball"); } else { document.getElementById((i + 1).toString() + (k).toString()).className = "ball"; } } document.getElementById((i + 1).toString() + "8").innerText = "第 " + (i + 1).toString() + " 趟排序(Min=" + a[i] + ",Max=" + a[len-i-1] + ")"; } } </script> </head> <body> <header> <h1>简单选择排序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="btnSimpleSort" value="Simple Select Sort" onclick="setSimpleSortValue();" /> <br /> <input type="button" id="btnDoubleSelect" value="Double Select Sort" onclick="setDoubleSelectSort();" /> <br /> <h3>简单选择排序</h3> <ul> <li>设所排序序列的记录个数为n。i取1,2,…,n-1,从所有n-i+1个记录(Ri,Ri+1,…,Rn)中找出排序码最小的记录,与第i个记录交换。执行n-1趟 后就完成了记录序列的排序。</li> <li>简单选择排序<mark>非稳定</mark>排序算法。</li> <li>在简单选择排序过程中,所需移动记录的次数比较少。</li> <li>进行比较操作的时间复杂度为O(n<sup>2</sup>),进行移动操作的时间复杂度为O(n)</li> <li>简单选择排序的优化方案是二元选择排序法,将其改进为每趟循环确定两个元素(当前趟最大和最小记录)的位置,从而减少排序所需的循环次数。改进后对n个数据进行排序,最多只需进行[n/2]趟循环</li> </ul> </aside> <section id="mainArea"></section> <footer> 这是底部信息 </footer> </body> </html>
关于二元选择排序的特殊处理:
一般情况下进行简单的交换即可。
特殊情况出现在当4个数值中有相同时,比如a[i]=a[max],a[len-1-i]=a[min]。
在代码里,我选择先把最小值min赋给a[i],同时把a[i]的值取出来,之后在代码里分别讨论了三种情况
①:当max是数组头部时,在①条件下又讨论了min在不在数组尾部的情况;
②:当min是数组尾部时(且max不在数组头部)
③:一般情况,同样适用于【min在数组头部,max在数组尾部】
Html5 简单选择排序演示的更多相关文章
- 简单选择排序(Simple Selection Sort)的C语言实现
简单选择排序(Simple Selection Sort)的核心思想是每次选择无序序列最小的数放在有序序列最后 演示实例: C语言实现(编译器Dev-c++5.4.0,源代码后缀.cpp) 原创文章, ...
- 排序系列 之 简单选择排序及其改进算法 —— Java实现
简单选择排序算法: 基本思想: 在待排序数据中,选出最小的一个数与第一个位置的数交换:然后在剩下的数中选出最小的数与第二个数交换:依次类推,直至循环到只剩下两个数进行比较为止. 实例: 0.初始状态 ...
- C语言数据结构之 简单选择排序
算法:设所排序序列的记录个数为n.i取1,2,-,n-1,从所有n-i+1个记录(Ri,Ri+1,-,Rn)中找出排序码最小的记录,与第i个记录交换.执行n-1趟 后就完成了记录序列的排序. 编译器: ...
- Hark的数据结构与算法练习之简单选择排序
/* * 简单选择排序 */ public class SimpleSort { public static void main(String[] args) { int[] arrayData = ...
- 简单选择排序(Java)
简单选择排序: 每一趟在整个记录中找到最小的那个作为有序序列的第i个记录. class SelectSort{ public void p(int[] a){ for(int i=0;i<a.l ...
- 八大排序算法之三选择排序—简单选择排序(Simple Selection Sort)
基本思想: 在要排序的一组数中,选出最小(或者最大)的一个数与第1个位置的数交换:然后在剩下的数当中再找最小(或者最大)的与第2个位置的数交换,依次类推,直到第n-1个元素(倒数第二个数)和第n个元素 ...
- 【算法】简单选择排序 O(n^2) 不稳定的 C语言
简单选择排序 一.算法描述 假设序列中有N个元素: 第1趟找到第1到N个元素之间最小的一个,与第1个元素进行交换 第2趟找到第2到N个元素之间最小的一个,与第2个元素进行交换 第3趟找到第3到N个元素 ...
- C#之简单选择排序
以排列INT数组为简单示范 namespace 简单选择排序 { class Program { static void SelectViod(int[] data) { ; i < data. ...
- 冒泡排序与简单选择排序——Java实现
1.冒泡排序 1)原理说明:反复遍历要排序的数列,一次比較两个元素,假设他们的顺序错误就把他们交换过来.走訪数列的工作是反复地进行直到没有再须要交换,也就是说该数列已经排序完毕. 2)代码实现: pa ...
随机推荐
- .NET Core中间件的注册和管道的构建(2)---- 用UseMiddleware扩展方法注册中间件类
.NET Core中间件的注册和管道的构建(2)---- 用UseMiddleware扩展方法注册中间件类 0x00 为什么要引入扩展方法 有的中间件功能比较简单,有的则比较复杂,并且依赖其它组件.除 ...
- 关于这段时间学习 EntityFramework的 一点感悟
Ado.Net,用了N多年,Entity Framework也关注了很多年. 每当项目转型的时候,就花费大巴的时间,学习一番,潮流的东西. 这个Orm很多,这个EF很火,这么多年了,我还是不敢用,虽然 ...
- html5的web存储
在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...
- 阿里云学生优惠Windows Server 2012 R2安装IIS,ftp等组件,绑定服务器域名,域名解析到服务器,域名备案,以及安装期间错误的解决方案
前言: 这几天终于还是按耐不住买了一个月阿里云的学生优惠.只要是学生,在学信网上注册过,并且支付宝实名认证,就可以用9块9的价格买阿里云的云服务ECS.确实是相当的优惠. 我买的是Windows S ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- ecshop验证码
<?php //仿制ecshop验证码(四位大写字母和数字.背景) //处理码值(四位大写字母和数字组成) //所有的可能的字符集合 $chars = 'ABCDEFGHIJKLMNOPQRST ...
- 嵌入式C语言代码的调试技巧
在项目开发的过程中,不可避免的会遇到调试代码的情况. 刚开始写代码时,我们想看具体执行到哪儿时,往往这么写: printf("***** Code is here! *****\n" ...
- 数据库备份并分离日志表(按月)sh 脚本
#!/bin/sh year=`date +%Y` month=`date +%m` day=`date +%d` hour=`date +%H` dir="/data/dbbackup/f ...
- 什么是英特尔® Edison 模块?
英特尔® Edison 模块 是一种 SD 卡大小的微型计算芯片,专为构建物联网 (IoT) 和可穿戴计算产品而设计. Edison 模块内含一个高速的双核处理单元.集成 Wi-Fi*.蓝牙* 低能耗 ...
- Java中的进程与线程(总结篇)
详细文档: Java中的进程与线程.rar 474KB 1/7/2017 6:21:15 PM 概述: 几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进 ...