本篇主要目的是利用Javascript實(shí)現(xiàn)簡單的排序算法，因本人算法小白一個(gè)，剛敲出來的東西比較粗糙又害怕會(huì)忘記，所以趁熱打鐵寫下這篇，后續(xù)會(huì)對(duì)代碼進(jìn)一步優(yōu)化同時(shí)摸索其他排序方法實(shí)現(xiàn)效果。
任務(wù)描述
- 基于上一任務(wù)
- 限制輸入的數(shù)字在10-100
- 隊(duì)列元素?cái)?shù)量最多限制為60個(gè)，當(dāng)超過60個(gè)時(shí)，添加元素時(shí)alert出提示
- 直接用高度表示數(shù)字大小
- 實(shí)現(xiàn)一個(gè)簡單的排序功能
實(shí)現(xiàn)效果
before.png
after.png
子元素超過60個(gè)
解決思路
基于上一篇基礎(chǔ)JavaScript練習(xí)（一），具體需要解決的問題分為四部分。
1.修改正則表達(dá)式，限制輸入的數(shù)值區(qū)間為1-100；
2.增加判斷條件，如果content_box.childNodes.length==60,進(jìn)程無法繼續(xù)并彈出提示框；
3.點(diǎn)擊左側(cè)入/右側(cè)入按鈕添加元素時(shí)，將用戶填寫的數(shù)值設(shè)置為該元素的高度；
4.實(shí)現(xiàn)排序的方法有很多（例：冒泡排序、快速排序、堆排序等），坦白說這里偷懶了，用了Javascript的內(nèi)置方法Aarry.prototype.sort();實(shí)際項(xiàng)目中如若遇到排序的問題，應(yīng)該首選此法。其他排序算法也是要學(xué)習(xí)的，后續(xù)會(huì)用其他方法實(shí)現(xiàn)，把頭埋下去，現(xiàn)在正是你苦學(xué)的時(shí)候，時(shí)刻保持謙遜的心，這是身為程序員必須的品質(zhì)。已追加冒泡排序、選擇排序
排序代碼實(shí)現(xiàn)
//增加一個(gè)排序按鈕
<input id="btn-sort" type="button" value="排序">
//獲取排序按鈕元素
var btn_sort=document.getElementById('btn-sort')；
//監(jiān)聽排序按鈕并觸發(fā)事件
btn_sort.addEventListener("click", function(){
//新建數(shù)組newArray
var newArray=[];
//遍歷原始子元素?cái)?shù)組，將子元素中存儲(chǔ)的數(shù)值依次添加到newArray數(shù)組中，這里因?yàn)榧夹g(shù)不精無法直接獲取子元素中的數(shù)值數(shù)組，所以采用這種比較笨拙的方法
for(var i=0;i<content_box.childNodes.length;i++){
newArray.push(content_box.childNodes[i].innerText);
}
//利用內(nèi)置排序方法sort()對(duì)newArray數(shù)組的數(shù)值進(jìn)行排序
newArray.sort(function(a,b){
return a-b;
})
//獲得排序后的數(shù)值，清空所有原有的子元素，遍歷newArray數(shù)組，重新創(chuàng)建li子元素，并以此將newArray的值設(shè)置為子元素的高度和innerText,最后添加到父元素content_box中
for (var x = 0; x < newArray.length; x++) {
content_box.removeChild(content_box.firstChild);
var content_list=document.createElement("li");
content_list.style.height=newArray[x]+'px';
content_list.innerText=newArray[x];
content_box.appendChild(content_list);
}
}, false);
整體代碼實(shí)現(xiàn)
包含javascript內(nèi)置sort（）排序方法、冒泡排序、選擇排序三種方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基礎(chǔ)練習(xí)2</title>
<style type="text/css">
ul{margin: 0;padding: 0;display: flex;align-items: flex-end;}
li{
display: inline-block;
width:20px;
text-align: center;
color: #fff;
background-color: #cd4a48;
margin-left: 2px;
margin-top: 10px;
font-size:0px;
}
</style>
</head>
<body>
<input id="text-box" type="text" value="">
<input id="btn-left-to" type="button" value="左側(cè)入">
<input id="btn-right-to" type="button" value="右側(cè)入">
<input id="btn-left-out" type="button" value="左側(cè)出">
<input id="btn-right-out" type="button" value="右側(cè)出">
<input id="btn-sort" type="button" value="排序">
<ul id="content-box"></ul>
<script>
window.onload=function(){
var text_box=document.getElementById("text-box"),
btn_left_to=document.getElementById("btn-left-to"),
btn_right_to=document.getElementById("btn-right-to"),
btn_left_out=document.getElementById("btn-left-out"),
btn_right_out=document.getElementById("btn-right-out"),
btn_sort=document.getElementById('btn-sort'),
content_box=document.getElementById("content-box");
//判斷，如果有值并且符合判斷條件，添加這條數(shù)據(jù)數(shù)據(jù)
function insert(dir){
var reg=/(^(?:[1-9]\d|100)$)/;
if(text_box.value==""){
alert("未輸入值");
text_box.focus();
}else if(isNaN(text_box.value)){
alert("您輸入的不是數(shù)字");
text_box.value="";
text_box.focus();
}else if(content_box.childNodes.length==60){
alert("最多只能添加60個(gè)值,已無法增加");
}else if(reg.test(text_box.value)){
var content_list=document.createElement("li");
content_list.innerText=text_box.value;
content_list.style.height=text_box.value+'px';
if (dir==="left") {
content_box.insertBefore(content_list,content_box.childNodes[0]);
text_box.value="";
text_box.focus();
}else if(dir==="right"){
content_box.appendChild(content_list);
text_box.value="";
text_box.focus();
}
}else{
alert("請(qǐng)輸入10-100之間的數(shù)字");
text_box.value="";
text_box.focus();
}
}
//刪除數(shù)據(jù)
function del(dir){
if (content_box.childNodes.length<=0) {
alert("沒有可以刪除的元素");
return false;
}else if (dir==="left") {
alert("刪除數(shù)字："+content_box.firstChild.innerText);
content_box.removeChild(content_box.firstChild);
text_box.value="";
}else if(dir==="right"){
alert("刪除數(shù)字："+content_box.lastChild.innerText);
content_box.removeChild(content_box.lastChild);
text_box.value="";
}else{
content_box.removeChild(event.target);
}
}
// function bubbleSort(arr) {
// var len = arr.length;
// for (var i = 0; i < len; i++) {
// for (var j = 0; j < len - 1 - i; j++) {
// if (arr[j] > arr[j+1]) { //相鄰元素兩兩對(duì)比
// var temp = arr[j+1]; //元素交換
// arr[j+1] = arr[j];
// arr[j] = temp;
// }
// }
// }
// return arr;
// }
//選擇排序
function selectionSort(arr) {
var len = arr.length;
var minIndex, temp;
for (var i = 0; i < len - 1; i++) {
minIndex = i;
for (var j = i + 1; j < len; j++) {
if (arr[j] < arr[minIndex]) { //尋找最小的數(shù)
minIndex = j; //將最小數(shù)的索引保存
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
btn_left_to.addEventListener("click", function(){insert("left")}, false);
btn_right_to.addEventListener("click", function(){insert("right")}, false);
btn_left_out.addEventListener("click", function(){del("left")}, false);
btn_right_out.addEventListener("click", function(){del("right")}, false);
btn_sort.addEventListener("click", function(){
var newArray=[];
for(var i=0;i<content_box.childNodes.length;i++){
newArray.push(content_box.childNodes[i].innerText);
}
// 方法一：Javascript內(nèi)置方法Array.prototype.sort();
// newArray.sort(function(a,b){
// return a-b;
// })
//冒泡排序
// bubbleSort(newArray);
// 選擇排序
selectionSort(newArray);
for (var x = 0; x < newArray.length; x++) {
content_box.removeChild(content_box.firstChild);
var content_list=document.createElement("li");
content_list.style.height=newArray[x]+'px';
content_list.innerText=newArray[x];
content_box.appendChild(content_list);
}
}, false);
content_box.addEventListener('click',function(e){
if(e.target.nodeName.toLowerCase() == 'li'){
content_box.removeChild(e.target);
}
});
}
</script>
</body>
</html>
通過該任務(wù)學(xué)到的新知識(shí)
1. Array.prototype.sort()
sort() 方法在適當(dāng)?shù)奈恢脤?duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。詳細(xì)可查
2. HTML DOM querySelector() 方法
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素。
3. 如何刪除父元素下的所有子元素
沒有找到直接可以刪除的方法，我采用的方法是依次刪除父元素第一個(gè)子元素。
content_box.removeChild(content_box.firstChild);
心得感悟
程序之路且走且珍惜，感謝大春哥，循循善誘，用心良苦。
參考文獻(xiàn)
- JS的十大經(jīng)典算法排序
-
JS參考文檔
注：如果有更好的方法，歡迎大家交流指導(dǎo)。
