基础JavaScript练习（二）
2017-07-07 本文已影响78人
不喜鹿
本篇主要目的是利用Javascript实现简单的排序算法，因本人算法小白一个，刚敲出来的东西比较粗糙又害怕会忘记，所以趁热打铁写下这篇，后续会对代码进一步优化同时摸索其他排序方法实现效果。
任务描述
- 基于上一任务
- 限制输入的数字在10-100
- 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
- 直接用高度表示数字大小
- 实现一个简单的排序功能
实现效果
before.png
after.png
子元素超过60个
解决思路
基于上一篇基础JavaScript练习（一），具体需要解决的问题分为四部分。
1.修改正则表达式，限制输入的数值区间为1-100；
2.增加判断条件，如果content_box.childNodes.length==60,进程无法继续并弹出提示框；
3.点击左侧入/右侧入按钮添加元素时，将用户填写的数值设置为该元素的高度；
4.实现排序的方法有很多（例：冒泡排序、快速排序、堆排序等），坦白说这里偷懒了，用了Javascript的内置方法Aarry.prototype.sort();实际项目中如若遇到排序的问题，应该首选此法。其他排序算法也是要学习的，后续会用其他方法实现，把头埋下去，现在正是你苦学的时候，时刻保持谦逊的心，这是身为程序员必须的品质。已追加冒泡排序、选择排序
排序代码实现
//增加一个排序按钮
<input id="btn-sort" type="button" value="排序">
//获取排序按钮元素
var btn_sort=document.getElementById('btn-sort')；
//监听排序按钮并触发事件
btn_sort.addEventListener("click", function(){
//新建数组newArray
var newArray=[];
//遍历原始子元素数组，将子元素中存储的数值依次添加到newArray数组中，这里因为技术不精无法直接获取子元素中的数值数组，所以采用这种比较笨拙的方法
for(var i=0;i<content_box.childNodes.length;i++){
newArray.push(content_box.childNodes[i].innerText);
}
//利用内置排序方法sort()对newArray数组的数值进行排序
newArray.sort(function(a,b){
return a-b;
})
//获得排序后的数值，清空所有原有的子元素，遍历newArray数组，重新创建li子元素，并以此将newArray的值设置为子元素的高度和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);
整体代码实现
包含javascript内置sort（）排序方法、冒泡排序、选择排序三种方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基础练习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="左侧入">
<input id="btn-right-to" type="button" value="右侧入">
<input id="btn-left-out" type="button" value="左侧出">
<input id="btn-right-out" type="button" value="右侧出">
<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");
//判断，如果有值并且符合判断条件，添加这条数据数据
function insert(dir){
var reg=/(^(?:[1-9]\d|100)$)/;
if(text_box.value==""){
alert("未输入值");
text_box.focus();
}else if(isNaN(text_box.value)){
alert("您输入的不是数字");
text_box.value="";
text_box.focus();
}else if(content_box.childNodes.length==60){
alert("最多只能添加60个值,已无法增加");
}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("请输入10-100之间的数字");
text_box.value="";
text_box.focus();
}
}
//删除数据
function del(dir){
if (content_box.childNodes.length<=0) {
alert("没有可以删除的元素");
return false;
}else if (dir==="left") {
alert("删除数字："+content_box.firstChild.innerText);
content_box.removeChild(content_box.firstChild);
text_box.value="";
}else if(dir==="right"){
alert("删除数字："+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]) { //相邻元素两两对比
// 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]) { //寻找最小的数
minIndex = j; //将最小数的索引保存
}
}
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内置方法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>
通过该任务学到的新知识
1. Array.prototype.sort()
sort() 方法在适当的位置对数组的元素进行排序，并返回数组。详细可查
2. HTML DOM querySelector() 方法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
3. 如何删除父元素下的所有子元素
没有找到直接可以删除的方法，我采用的方法是依次删除父元素第一个子元素。
content_box.removeChild(content_box.firstChild);
心得感悟
程序之路且走且珍惜，感谢大春哥，循循善诱，用心良苦。
参考文献
- JS的十大经典算法排序
-
JS参考文档
注：如果有更好的方法，欢迎大家交流指导。
