JS完成冒泡排序，拔出排序和疾速排序並排序輸入。本站提示廣大學習愛好者：（JS完成冒泡排序，拔出排序和疾速排序並排序輸入）文章只能為提供參考，不一定能成為您想要的結果。以下是JS完成冒泡排序，拔出排序和疾速排序並排序輸入正文
在一次面試中被問到了此成績，然則真是懵了，沒能答復下去，後來經由過程JS整頓了一下，在聯合html代碼做了一個文本框，把輸出的內容從文本框排序輸入，再次不做論述了，上面經由過程一段代碼給年夜家展現下：
以下是代碼：
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sorting</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--重要頁面構造-->
<div class="container">
<input type="text" name="number" id="number" placeholder="Please enter 10 numbers(don't leave space)" />
<a href="javascript:void()" class="sortbtn" id="resultBtn">Sort</a>
<label class="title">After Sorted:</label>
<!--以下三個label分離顯示冒泡，拔出，疾速排序的成果-->
<label class="result" for="bubblesort"></label>
<label class="result" for="insertsort"></label>
<label class="result" for="quicksort"></label>
</div>
<!--end-->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
來給這個頁面寫點款式，否則就太欠好看了。
style.css
*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
width: 400px;
margin: 100px auto;
}
input[type="text"]{
display: block;
width: 400px;
height: 40px;
text-align: center;
line-height: 40px;
outline: none;
font-size: 14px;
border-radius: 15px;
border: 1px solid #aaaaaa;
}
.sortbtn{
display: block;
width: 200px;
height: 34px;
text-align: center;
line-height: 34px;
border: 1px solid black;
border-radius: 10px;
text-decoration: none;
color: black;
margin-left: 100px;
margin-top: 30px;
}
.sortbtn:hover{
display: block;
background-color: black;
color: #ffffff;
}
label{
display: block;
width: 200px;
text-align: center;
margin-left: 100px;
margin-top: 20px;
font-size: 20px;
}
然後就是重要的功效完成了。
script.js
window.onload = function(){
var btn = document.getElementById("resultBtn"); //成果輸入按鈕
var inputnum = document.getElementById("number"); //數字輸出框
var resultlbl =document.getElementsByTagName("label"); //成果顯示的label
var i,j,temp;
//冒泡排序
var bubble = function(arr){
for(i=0;i<9;i++){
for(j=0;j<9-i;j++){
if(arr[j] > arr[j+1]){
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
//拔出排序
var insersort = function(arr){
for(i=1;i<10;i++){
temp = arr[i];
j = i;
while(j > 0 && arr[j-1] > temp){
arr[j] = arr[j-1];
j--;
}
arr[j] = temp;
}
return arr;
}
//疾速排序
var quicksort = function(arr){
var basenum,basenumIndex;
var left = [];
var right = [];
if(arr.length <= 1){
return arr;
}
//基准數的地位
basenumIndex = Math.floor(arr.length/2);
basenum = arr.splice(basenumIndex,1)[0];
for(i=0;i<arr.length;i++){
if(arr[i] < basenum){
left.push(arr[i]);
}
else{
right.push(arr[i]);
}
}
//遞歸挪用
return quicksort(left).concat([basenum],quicksort(right));
}
//斷定輸出的值類型能否為數字
function isNum(num){
var reNum =/^[0-9]+$/;
return (reNum.test(num));
}
//按鈕點擊事宜
btn.onclick = function(){
//斷定輸出的值的類型和長度和能否為空
if(!isNum(inputnum.value) || inputnum.value == "" || inputnum.value.length > 10 || inputnum.value.length < 10){
resultlbl[0].innerHTML = "Your format is wrong![Must Be 10 numbers]";
resultlbl[0].style.color = "red";
}
else{
resultlbl[0].innerHTML = "After Sorted:";
resultlbl[0].style.color = "black";
var inputstream = inputnum.value.toString(); //將輸出的內容轉換為字符串
var data = inputstream.split(""); //將轉換的字符串朋分，相當於轉化為數組
//成果輸入
resultlbl[1].innerHTML = "BubbleSort:" + "<br/>" + bubble(data);
resultlbl[2].innerHTML = "InsertSort:" + "<br/>" + insersort(data);
resultlbl[3].innerHTML = "QuickSort:" + "<br/>" + quicksort(data);
}
}
}
最初的後果是如許的：
未輸出情形下，一只寧靜的文本框，一只寧靜的按鈕和一個label：
輸出的不是數字，未輸出十位或許超越十位，或許為空，點擊按鈕以後，都邑提醒毛病：
為空：
不是數字且缺乏十位：
超越十位：
輸出准確的情形下：
提醒：輸出的數字之間不消加空格，輸出的數字之間不消加空格，輸出的數字之間不消加空格，主要的工作說三遍
須要留意的是文本框中輸出的數字只能是一名的數字（0-9），有關兩位數字乃至更多位數字的排序辦法請持續追蹤此網站。願望這些內容對年夜家有所贊助。
