자 바스 크 립 트 인터페이스 에서 빠 른 정렬 시연
6842 단어 JavaScript
이것 을 하면 먼저 빠 른 정렬 을 할 수 있 습 니 다. 여 기 는 설명 하지 않 고 페이지 효 과 를 나 갈 뿐 입 니 다.
주의: 하나의 div 를 배열 에 넣 으 면 div 가 위 치 를 교환 할 때 배열 의 처리 에 주의 하 십시오. 왼쪽 이나 오른쪽 에 있 는 left 값 을 저장 하고 다음 while 의 left 포 지 셔 닝 을 저장 해 야 합 니 다.
html
<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 src="js/sort.js" type="text/javascript" charset="utf-8"/>
<div class="divMain right" id="right">
<div class="buttonDiv" id="buttonDiv">
<button class="button"><span> </span></button>
</div>
<div class="buttonDiv" id="buttonDiv2" style="display: none;">
<button class="button" id="start"><span> </span></button>
</div>
</div>
</code></pre>
<span style="color:#ff0000;"><br/> </span>
<pre><code> <script type="text/javascript">
var arr = [];
arr.push(14);
arr.push(21);
arr.push(5);
arr.push(67);
arr.push(100);
arr.push(63);
arr.push(1);
arr.push(8);
arr.push(45);
arr.push(43);
arr.push(32);
arr.push(29);
arr.push(12);
arr.push(3);
arr.push(66);
arr.push(41);
arr.push(5);
arr.push(1);
arr.push(67);
arr.push(99);
console.log(arr.join(","))
quickSort(arr, 0, arr.length-1);
console.log(arr.join(","))
function quickSort(arr, start, end) {
if(start >= end)
return false;
var i = start,
j = end;
var temp = arr[i];
while(i < j) {
while(i < j && arr[j] > temp) j = j - 1;
if(i < j)
arr[i++] = arr[j];
while(i < j && arr[i] < temp) i = i + 1;
if(i < j)
arr[j--] = arr[i];
}
arr[i] = temp;
console.log('exec quickSort start:'+start+ ' middle:'+ i +' end:'+end);
quickSort(arr, start, i-1);
quickSort(arr, i+1, end);
}
</script></code></pre>
<p><br/></p> js
<pre><code>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);
});
var content={};
function startInitDiv() {
$("#buttonDiv").hide();
var divArr = [];
var spanArr = [];
var num = frame.divNumber;
initDiv(0,num,divArr,spanArr);
}
/* div */
function initDiv(i, num, divArr,spanArr) {
if(i >= num) {
$("#buttonDiv2").show();
content.divs=divArr;
content.spans=spanArr;
content.length = divArr.length;
return null;
}
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(){
initDiv(i+1, num, divArr,spanArr);
}, 1);
}
function startQuickSort() {
quickSort(content, 0, content.length-1);
}
function quickSort(cont, start, end) {
if(start >= end) {
$("#start").html(" ");
return false;
}
var i = start,
j = end;
var divs = cont.divs,
spans = cont.spans;
var temp = divs[i];
$(temp).css("opacity","0.1");
$(temp).css("filter","Alpha(opacity=10)");
divs[i] = $(divs[i]).position().left+"px";
A(cont, i, j, temp, start, end);
}
function rightToLeft(cont, i, j, temp, start, end) {
/* */
var divs = cont.divs;
if(i < j && $(divs[j]).height() > $(temp).height()) {
setTimeout(function(){
j = j - 1;
rightToLeft(cont, i, j, temp, start, end);
}, 10);
} else {
if(i < j) {
var l = $(divs[j]).position().left+"px";
$(divs[j]).css("left", divs[i]);
divs[i] = divs[j];
divs[j] = l;
i = i + 1;
}
leftToRight(cont, i, j, temp, start, end);
}
}
/* */
function leftToRight(cont, i, j, temp, start, end) {
/* */
var divs = cont.divs;
if(i < j && $(divs[i]).height() < $(temp).height()) {
setTimeout(function(){
i = i + 1;
leftToRight(cont, i, j, temp, start, end);
}, 10);
} else {
if(i < j) {
var r = $(divs[i]).position().left+"px";
$(divs[i]).css("left", divs[j]);
divs[j] = divs[i];
divs[i] = r;
j = j - 1;
}
A(cont, i, j, temp, start, end);
}
}
function A (cont, i, j, temp, start, end) {
var divs = cont.divs;
if(i < j) {
setTimeout(function() {
rightToLeft(cont, i, j, temp, start, end);
}, 10);
} else {
/* */
$(temp).css("opacity","1");
$(temp).css("filter","Alpha(opacity=100)");
$(temp).css("left", divs[i]);
divs[i] = temp;
quickSort(cont, start, i-1);
quickSort(cont, i+1, end);
}
}
</code></pre>
<pre><code>.right {
position: relative;
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;
}
</code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
