Javascript排序实例

JavaScript排序的例子，如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.cxybl.com</title>
<style type="text/css">
*{font-family:Arial, Helvetica, sans-serif}
.div1{
background-color:#35BDDB;
float:left;
margin-left:1px;
color:#fff;
vertical-align:middle;
font-size:12px;
}
.sorted{
background-color:#CFD0D2}
#content{ width:100%; height:601px; background-color:#222222; text-align:center; }
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
var numbs = [];
var numbers = 40;
var divWidth = Math.floor(1000/numbers);
var ti = 1;
var step = 0;
var step1 = 0;
function init(){
step1 = 0;
numbers = $("#numb").val();
if(isNaN(numbers) Number(numbers) <= 0){
numbers = 40;
$("#numb").val(40);
}
if(Number(numbers) > 500){
numbers = 500;
$("#numb").val(500);
}
numbs = [];
step = 0;
ti = 1;
$("#content").html("");
while(numbs.length < numbers){
var t = Math.floor(600*Math.random());
if(numbs.indexOf(t) < 0){
numbs.push(t);
}
}
$("#step").html("");
$.each(numbs, function(i,n){
$("<div>").addClass("div1").css({width: (100/numbers - 0.1)+"%", height: n + "px", "margin-top": (600-n) + "px"})
.attr("id", n).appendTo($("#content"));
});
}
$(function(){
init();
$("#random").click(init);
$("#bubbleSort").click(function(){
$(":input").attr("disabled","disabled");
if(step1 != 0){
init();
}
bubbleSort();
});
$("#QuickSort").click(function(){
$(":input").attr("disabled","disabled");
if(step1 != 0){
init();
}
QuickSort(numbs, 0, numbs.length);
});
});
function bubbleSort(){
for(i = 0; i< numbs.length;i++){
for(j = i + 1;j<numbs.length;j++){
if(numbs[i] > numbs[j]){
swap(numbs, i, j);
}
}
}
}
function swap(arrays, i, j){
var t = arrays[i];
var m = arrays[j];
arrays[i] = arrays[j];
arrays[j] = t;
step1++;
setTimeout("swapDiv($('#' + "+t+"), $('#' + "+m+"))", (ti++)*50);
}
function swapDiv(div1, div2){
$(".div1").removeClass("sorted");
var tempDiv = $("<div>");
div1.after(tempDiv);
div2.after(div1);
tempDiv.after(div2);
tempDiv.remove();
div1.addClass("sorted");
div2.addClass("sorted");
$("#step").html(++step);
if(step == step1){
$(":input").attr("disabled","");
$(".div1").removeClass("sorted");
}
}
function QuickSort(pData, left, right){
var i,j;
var middle,temp;
i = left;
j = right;
middle = pData[left];
while(true){
while((++i)<right-1 && pData[i]<middle);
while((--j)>left && pData[j]>middle);
if(i>=j)
break;
swap(pData, i, j);
}
swap(pData, left, j);
if(left<j)
QuickSort(pData,left,j);
if(right>i)
QuickSort(pData,i,right);
}
</script>
</head>
<body>
<div id="num"></div>
<button id="bubbleSort">bubbleSort</button>
<button id="QuickSort">QuickSort</button>
<input id="numb" value="40"/>
<button id="random">init</button>
step:<span id="step"></span>
<div id="content"></div>
</body>
</html>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索排序
， numbers
， quicksort
， var
， cfd
， content
step
javascript经典实例、javascript项目实例、javascript 实例、javascript实例精通、javascript冒泡排序，以便于您获取更多的相关知识。

时间： 2024-10-06 15:25:55

Javascript排序实例的相关文章

javascript操作表格排序实例分析_javascript技巧

本文实例讲述了javascript操作表格排序的方法.分享给大家供大家参考.具体如下: 完整例子如下: <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { swit

js表格排序实例分析

篇文章主要介绍了js表格排序实例分析(支持int,float,date,string四种数据类型),涉及javascript常用的升序.降序及数据类型转换等相关技巧,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

JavaScript 经典实例日常收集整理(常用经典)_javascript技巧

跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除事件 function removeEvent(obj,type,fn){ if(obj.removeEv

jQuery实现带分组数据的Table表头排序实例分析_jquery

本文实例讲述了jQuery实现带分组数据的Table表头排序.分享给大家供大家参考,具体如下: 如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变从网上找了一段常规的table排序,改了改,以满足"分组支持",贴在这里备份 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

JavaScript运算符实例详解

核心提示:JavaScript运算符实例详解根据处理对象的数目: 单元运算符; 二元运算符; 三元运算符. 根据功能: 赋值运算符; = += -= *= /= %=(取余) 算术运算符; + - * / %(取余) ++(递增) --(递减) - 例1: 例2: <Script> var x = y = 3; with (document) { write("x = 3, y = 3 <br>"); write("若x = y

javascript排序函数实现数字排序

这篇文章主要介绍了javascript排序函数实现数字排序的相关资料,附上示例,需要的朋友可以参考下 javascript排序函数实现数字排序 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <script> function SortNumber(obj,func) //定义通用排序函数 { //参数验证,

Javascript排序算法之合并排序的2个例子介绍

这篇文章主要介绍了Javascript排序算法之合并排序(归并排序)的2个例子,需要的朋友可以参考下归并排序(Merge sort)是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用. 归并(Merge)排序法是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个子序列,每个子序列是有序的.然后再把有序子序列合并为整体有序序列. 归并排序是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(

JavaScript排序算法动画演示效果的实现方法_javascript技巧

之前在知乎看到有人在问自己写了一个冒泡排序算法如何用HTML,CSS,JavaScript展现出来排序过程. 感觉这个问题还挺有意思 .前些时间就来写了一个.这里记录一下实现过程. 基本的思想是把排序每一步的时候每个数据的值用DOM结构表达出来. 问题一:如何将JavaScript排序的一步步进程展现出来? 我试过的几种思路: 1.让JavaScript暂停下来,慢下来. JavaScript排序是很快的,要我们肉眼能看到它的实现过程,我首先想到的是让排序慢下来. 排序的每一个循环都让它停

javascript排序函数实现数字排序_javascript技巧

javascript排序函数实现数字排序 <script> function SortNumber(obj,func) //定义通用排序函数 { //参数验证,如果第一个参数不是数组或第二个参数不是函数则抛出异常 if(!(obj instanceof Array) || !(func instanceof Function)) { var e = new Error(); //生成错误信息 e.number = 100000; //定义错误号 e.message = "参数无效&q