您的位置：首页 > Web前端 > JavaScript

JavaScript界面演示交换排序

2016-04-21 17:55 501 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sort.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="divMain right" id="right">
<div class="buttonDiv" id="buttonDiv">
<button class="button" onclick="startInsertSort()"><span>开始</span></button>
</div>
</div>
</body>
</html>

var frame = {};
var divFrame = {};
$(function() {
/*排序的div*/
divFrame._width = "5";
divFrame.width = "5px";

/*面板*/
frame.obj = $("#right");
frame.width = $("#right").width();
frame.height = $("#right").height();
frame.divNumber = parseInt(frame.width / divFrame._width);
});

/*初始化*/
function startInsertSort() {

$("#buttonDiv").hide();
var divArr = [];
var num = frame.divNumber;
for(var i = 0; i < num; i++) {
var div = document.createElement("div");
$(div).attr("class","newDiv");
$(div).attr("id","div"+i);
$(div).css("width",divFrame.width);
$(div).css("height",getRandomHeight(frame.height, 1) + "px");
$(div).css("left", i * divFrame._width + "px");
frame.obj.append(div);
divArr.push(div);
}
setTimeout(function(){
insertSort(divArr, 0, 1);
}, 2000);/*2秒后开始*/

}
/*开始排序 利用定时器 为了出现那种效果*/
function insertSort(arr, i, j) {
var length = arr.length;
if(i >= length)
return false;

var leftDiv = arr[i];
var rightDiv = arr[j];
$(arr[i-1]).css("background-color", "yellow");
$(leftDiv).css("background-color", "yellow");
$(rightDiv).css("background-color", "aqua");
if($(arr[i]).height() > $(arr[j]).height()) {

var l = $(arr[i]).position().left;
var r = $(arr[j]).position().left;
$(arr[i]).css("left", r + "px");
$(arr[j]).css("left",l + "px");
arr[i] = rightDiv;
arr[j] = leftDiv;
$(arr[i]).css("background-color", "white");
$(arr[j]).css("background-color", "white");
}
setTimeout(function(){

if(j + 1 >= length) {
i = i + 1;
j = i + 1;
} else{
j = j + 1;
}
insertSort(arr, i, j);
$(rightDiv).css("background-color", "white");
}, 1);
}
function getRandomHeight(max, min) {
var range = max - min;
var rand = Math.random();
return (min + Math.round(range * rand));
}

css:

.right {
<span style="white-space:pre">	</span>position: relative;
<span style="white-space:pre">	</span>width: 100%;
}
.divMain {
height: 700px;
background-color: #666666;
border-radius: 5px;
box-shadow: 10px 10px 20px 10px;
display: inline-block;
}

.button {
display: inline-block;
border-radius: 5px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
width: 100px;
height: 40px;
transition: 0.5s;
cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}

.button:active {
background-color: #4CAF50;
border: 2px solid #e7e7e7;
transition: 0.1s;
}

.buttonDiv {
position: absolute;
margin-left: 45%;
margin-top: 600px
}
#buttonDiv2 {
position: absolute;
z-index: 9999;
margin-left: 45%;
margin-top: 600px
}

.newDiv{
position: absolute;
border: solid 1px #000000;
background-color: gainsboro;
border-radius: 5px;
bottom: 0px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript界面演示 交换排序

JavaScript界面演示交换排序