任务目的
- 学习与实践 JavaScript 的基本语法、语言特性
- 初步了解 JavaScript 的事件是什么
- 初步了解 JavaScript 中的DOM是什么
- 学习与实践 JavaScript 的基本语法、语言特性
- 练习使用 JavaScript 实现简单的排序算法
任务描述
05
- 模拟一个队列,队列的每个元素是一个数字，初始队列为空
- 有一个input输入框，以及4个操作按钮
- 点击”左侧入”,将input中输入的数字从左侧插入队列中；
- 点击”右侧入”,将input中输入的数字从右侧插入队列中；
- 点击”左侧出”,读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
- 点击”右侧出”,读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
- 点击队列中任何一个元素,则该元素会被从队列中删除
06
- 基于上个任务
- 限制输入的数字在10-100
- 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
- 队列展现方式变化如图，直接用高度表示数字大小
- 实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来
整体思路
第二个任务基于第一个任务，就把两个和一起来写吧
首先根据任务的要求，将HTML写出来，只需要一个input和若干button用以用户触发不同的事件。
<input type="text" id="data-input">
<button id="left-in">左侧入</button>
<button id="right-in">右侧入</button>
<button id="left-out">左侧出</button>
<button id="right-out">右侧出</button>
<button id="sort">冒泡排序</button>
<button id="random">随机生成一组数据</button>
<div id="list-wrap"></div>
然后给相应的元素绑定点击事件
//初始化 添加事件监听器
function init(){
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener("click",function(e){
btnHandle(e.target);
});
}
$("data-input").addEventListener("focus",function(e){
e.target.value = "";
});
}
init();
添加事件监听器后，需要根据事件调用对应的数据处理函数，处理之后将数据渲染到页面上
//点击按钮时的处理逻辑
function btnHandle(target){
var id = target.id;
switch(id){
case 'left-in':
leftIn();
break;
case 'right-in':
rightIn();
break;
case 'left-out':
leftOut();
break;
case 'right-out':
rightOut();
break;
case 'random':
randomData();
break;
case 'sort':
sortData();
break;
}
//渲染数据
renderData()
}
对于数据，只需要一个数组来模拟队列，所以下面四个输入输出函数都是对数组的操作，当然也可以将他们整合一下，变成一个函数或者两个函数(一个输入一个输出，整合的代码在最终代码中查看)
//左入数据处理函数
function leftIn(){
var num = parseInt($("data-input").value);
if(isNaN(num) || num <10 || num > 100){
alert("请输入10-100之间的数字");
}else{
if(data.length<60){
data.unshift(num);
}else{
alert("最多添加60个");
}
}
}
//右入数据处理函数
function rightIn(){
var num = parseInt($("data-input").value);
if(isNaN(num) || num <10 || num > 100){
alert("请输入10-100之间的数字");
}else{
if(data.length<60){
data.push(num);
}else{
alert("最多添加60个");
}
}
}
//左出数据处理函数
function leftOut(){
if(data.length > 0){
var item = data.shift();
alert(item);
}else{
alert("目前为空，请先输入");
}
}
//右出数据处理函数
function rightOut(){
if(data.length > 0){
var item = data.pop();
alert(item);
}else{
alert("目前为空，请先输入");
}
}
最后需要将处理过的数据渲染到页面上，根据要求，我们将每个div的高度设置为对应的数字，单位为像素。然后对每个div添加点击删除事件，这里有个技巧，利用call函数来获取数组的索引值，调用splice函数，根据索引值将数组中的数据删除，最后再次渲染数据。
//渲染数据
function renderData(){
var text = '';
for(var i=0;i<data.length;i++){
text += '<div class="list" style="height:'+data[i]+'px;line-height:'+data[i]+'px">' + data[i] + '</div>';
}
var list = $("list-wrap");
list.innerHTML = text;
//给list-wrap中的div添加点击删除事件
// var lists = document.getElementsByClassName("list");
var lists = list.children;
for(var i=0;i<lists.length;i++){
lists[i].addEventListener("click",function(e){
var node = e.target;
//获取当前div在数组中的索引
var index = [].indexOf.call(node.parentNode.children,node);
data.splice(index,1);
renderData();
})
}
}
最后题目要求能够可视化的将排序算法展示出来，这种情景，可以利用setInterval函数，指定每次周期的时间间隔，将排序算法写在run函数中。在执行过程中，每排一次序，就将数据渲染一次，最终实现了排序的可视化。
//冒泡排序
function sortData(){
var i=0,j=1,temp,len=data.length,timer=null;
timer = setInterval(run,15);
function run(){
if(i<len){
if(j<len){
if(data[i]>data[j]){
temp = data[i];
data[i] = data[j];
data[j] = temp;
renderData();
}
j++;
}else{
i++;
j = i + 1;
}
}else{
clearInterval(timer);
return;
}
}
}
最后的最后，给页面添加简单的样式就可以了。当然为了便于演示，也添加了一个随机生成数据的按钮。