JavaScript 集合分别用sort和选择排序算法来排序
效果图:
针对集合的分数进行了排序
下面看代码:
引用了jquery-1.10.2.js
html代码:
<body style="position:absolute;top:0px;right:0px;left:0px;bottom:0px;width:100%;height:100%;margin: 0px; padding: 0px;">
<div style="max-width: 100%;overflow: hidden;">
<b style="padding:0px 100px;">排序前:</b>
<div id="oldDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
<br />
<div style="height:50px;width:100%;padding:0px 100px;">
<div style="width:250px;float:left;">排序类型:<label><input type="radio" checked="checked" name="sortType" id="sort1" value="1"/>升序</label>
<label style="margin-left:10px;"><input type="radio" name="sortType" id="sort2" value="2" />降序</label></div>
<input type="button" style="width:100px;height:45px;margin-left:100px;" onclick="sortData1()" value="sort排序"/>
<input type="button" style="width:200px;height:45px;margin-left:100px;" onclick="sortData2()" value="选择排序算法排序" />
</div>
<br />
<b style="padding:0px 100px;">排序后:</b>
<div id="newDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
</div>
</body>
js代码:
var arr = [
{ name: '李白', sex: '男', fraction :90},
{ name: '张飞', sex: '男', fraction: 80 },
{ name: '亚瑟', sex: '男', fraction: 75 },
{ name: '黄忠', sex: '男', fraction: 60 },
{ name: '李元芳', sex: '男', fraction: 95 },
{ name: '鲁班', sex: '未知', fraction: 96 },
{ name: '孙悟空', sex: '男', fraction: 99 },
{ name: '露娜', sex: '女', fraction: 97 },
{ name: '凯', sex: '男', fraction: 55 }, ];
$(function () {
for (var i = 0; i < arr.length; i++) {
$('#oldDiv').append('<div>姓名:' + arr[i].name + ' 性别:' + arr[i].sex + ' 分数:' + arr[i].fraction + '</div>');
}
});
function sortData1() {
function sortid(a, b) {
if (document.getElementById('sort1').checked) {
return a.fraction - b.fraction;//升序
}
else {
return b.fraction - a.fraction;//降序
}
}
var html = '';
arr.sort(sortid);
for (var i = 0; i < arr.length; i++) {
html+='<div>姓名:' + arr[i].name + ' 性别:' + arr[i].sex + ' 分数:' + arr[i].fraction + '</div>';
}
$('#newDiv').html(html);
}
function sortData2() {
var len = arr.length;
for (var i = 0; i < len; i++) {
index = i;
for (var j = i + 1; j < len; j++) {
if (document.getElementById('sort1').checked) {
//升序
if (arr[j].fraction < arr[index].fraction) {
index = j;
}
}
else {
//降序
if (arr[j].fraction > arr[index].fraction) {
index = j;
}
}
}
if (index!=i) {
temp = arr[i];
arr[i] = arr[index];
arr[index] = temp;
}
}
var html = '';
for (var i = 0; i < arr.length; i++) {
html += '<div>姓名:' + arr[i].name + ' 性别:' + arr[i].sex + ' 分数:' + arr[i].fraction + '</div>';
}
$('#newDiv').html(html);
}
整个页面的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<title>集合排序</title>
<script type="text/javascript">
var arr = [
{ name: '李白', sex: '男', fraction :90},
{ name: '张飞', sex: '男', fraction: 80 },
{ name: '亚瑟', sex: '男', fraction: 75 },
{ name: '黄忠', sex: '男', fraction: 60 },
{ name: '李元芳', sex: '男', fraction: 95 },
{ name: '鲁班', sex: '未知', fraction: 96 },
{ name: '孙悟空', sex: '男', fraction: 99 },
{ name: '露娜', sex: '女', fraction: 97 },
{ name: '凯', sex: '男', fraction: 55 }, ];
$(function () {
for (var i = 0; i < arr.length; i++) {
$('#oldDiv').append('<div>姓名:' + arr[i].name + ' 性别:' + arr[i].sex + ' 分数:' + arr[i].fraction + '</div>');
}
});
function sortData1() {
function sortid(a, b) {
if (document.getElementById('sort1').checked) {
return a.fraction - b.fraction;//升序
}
else {
return b.fraction - a.fraction;//降序
}
}
var html = '';
arr.sort(sortid);
for (var i = 0; i < arr.length; i++) {
html+='<div>姓名:' + arr[i].name + ' 性别:' + arr[i].sex + ' 分数:' + arr[i].fraction + '</div>';
}
$('#newDiv').html(html);
}
function sortData2() {
var len = arr.length;
for (var i = 0; i < len; i++) {
index = i;
for (var j = i + 1; j < len; j++) {
if (document.getElementById('sort1').checked) {
//升序
if (arr[j].fraction < arr[index].fraction) {
index = j;
}
}
else {
//降序
if (arr[j].fraction > arr[index].fraction) {
index = j;
}
}
}
if (index!=i) {
temp = arr[i];
arr[i] = arr[index];
arr[index] = temp;
}
}
var html = '';
for (var i = 0; i < arr.length; i++) {
html += '<div>姓名:' + arr[i].name + ' 性别:' + arr[i].sex + ' 分数:' + arr[i].fraction + '</div>';
}
$('#newDiv').html(html);
}
</script>
</head>
<body style="position:absolute;top:0px;right:0px;left:0px;bottom:0px;width:100%;height:100%;margin: 0px; padding: 0px;">
<div style="max-width: 100%;overflow: hidden;">
<b style="padding:0px 100px;">排序前:</b>
<div id="oldDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
<br />
<div style="height:50px;width:100%;padding:0px 100px;">
<div style="width:250px;float:left;">排序类型:<label><input type="radio" checked="checked" name="sortType" id="sort1" value="1"/>升序</label>
<label style="margin-left:10px;"><input type="radio" name="sortType" id="sort2" value="2" />降序</label></div>
<input type="button" style="width:100px;height:45px;margin-left:100px;" onclick="sortData1()" value="sort排序"/>
<input type="button" style="width:200px;height:45px;margin-left:100px;" onclick="sortData2()" value="选择排序算法排序" />
</div>
<br />
<b style="padding:0px 100px;">排序后:</b>
<div id="newDiv" style="height:230px;width:400px;border:1px solid #000;margin:0px 100px;"></div>
</div>
</body>
</html>