任务目的
- 学习与实践JavaScript的基本语法、语言特性
- 初步了解JavaScript的事件是什么
- 初步了解JavaScript中的DOM是什么
任务描述
- 如图,模拟一个队列,队列的每个元素是一个数字,初始队列为空
- 有一个input输入框,以及4个操作按钮
- 点击”左侧入”,将input中输入的数字从左侧插入队列中;
- 点击”右侧入”,将input中输入的数字从右侧插入队列中;
- 点击”左侧出”,读取并删除队列左侧第一个元素,并弹窗显示元素中数值;
- 点击”右侧出”,读取并删除队列又侧第一个元素,并弹窗显示元素中数值;
- 点击队列中任何一个元素,则该元素会被从队列中删除
任务注意事项
- 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 示例图仅为参考,不需要完全一致
- 需要考虑数字输入的合法性
- 建议不使用任何第三方库、框架
任务完成与总结:
还是一脸的懵Zzzz
//事件绑定函数,兼容浏览器差异
function addEvent(element, event, listener) {
if (element.addEventListener) {
element.addEventListener(event, listener, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + event, listener);
}
else {
element["on" + event] = listener;
}
}//遍历数组的方法,针对数组中每一个元素执行fn函数,并将数组索引和元素作为参数传递,后面用
function each(arr, fn) {
for (var cur = 0; cur < arr.length; cur++) {
fn(arr[cur], cur);
}
}window.onload = function() {
var container = document.getElementById("container");
var buttonList = document.getElementsByTagName("input");
//定义队列的对象
var queue = {
str: [], leftPush: function(num) {
this.str.unshift(num);
this.paint();
}, rightPush: function(num) {
this.str.push(num);
this.paint();
}, isEmpty: function() {
return (this.str.length == 0);
}, leftPop: function() {
if (!this.isEmpty()) {
alert(this.str.shift());
this.paint();
}
else {
alert("The queue is already empty!");
}
}, rightPop: function() {
if (!this.isEmpty()) {
alert(this.str.pop());
this.paint();
}
else {
alert("The queue is already empty!");
}
}, paint: function() {
var str = "";
each(this.str, function(item){str += ("<div>" + parseInt(item) + "</div>")});
container.innerHTML = str;
addDivDelEvent();
}, deleteID: function(id) {
console.log(id);
this.str.splice(id, 1);
this.paint();
} } //为container中的每个div绑定删除函数
function addDivDelEvent() {
for (var cur = 0; cur < container.childNodes.length; cur++) { //这里要使用闭包,否则永远绑定到指定div上的delete函数的参数永远等于跳出时的cur值(length);
addEvent(container.childNodes[cur], "click", function(cur) {
return function(){return queue.deleteID(cur)};
}(cur));
}
} //为4个按钮绑定函数
addEvent(buttonList[1], "click", function() {
var input = buttonList[0].value;
if ((/^[0-9]+$/).test(input)) {
queue.leftPush(input);
}
else {
alert("Please enter an interger!");
}
});
addEvent(buttonList[2], "click", function() {
var input = buttonList[0].value;
if ((/^[0-9]+$/).test(input)) {
queue.rightPush(input);
}
else {
alert("Please enter an interger!");
}
});
addEvent(buttonList[3], "click", function(){queue.leftPop()});
addEvent(buttonList[4], "click", function(){queue.rightPop()});
}
先保存着,日后再看再研究。。。