基础JavaScript练习（一）
2017-07-06 本文已影响209人
不喜鹿
任务描述
- 模拟一个队列，队列的每个元素是一个数字，初始队列为空
- 有一个input输入框，以及4个操作按钮
1.点击"左侧入"，将input中输入的数字从左侧插入队列中；
2.点击"右侧入"，将input中输入的数字从右侧插入队列中；
3.点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
4.点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值； - 点击队列中任何一个元素，则该元素会被从队列中删除
- 限制数字在1-100之间
效果图
解决思路
从任务描述中可以看出本任务主要工作大致可以分为两大块：插入数据和删除数据
因此我分为insert()插入方法和del()删除方法,在insert()方法中对文本框中的数值根据任务要求进行验证
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>JS练习</title>
</head>
<style type="text/css">
li{
display: inline-block;
width:auto;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background-color: #cd4a48;
margin-top: 10px;
margin-left: 5px;
padding: 0 5px;
}
</style>
<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="右侧出">
<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"),
content_box=document.getElementById("content-box");
//判断，如果有值并且符合判断条件，添加这条数据数据
function insert(dir){
var reg=/(^[1-9][0-9]$|^[0-9]$|^100$)/;
if(text_box.value==""){
alert("未输入值");
text_box.focus();
}else if(isNaN(text_box.value)){
alert("您输入的不是数字");
text_box.value="";
text_box.focus();
}else if(reg.test(text_box.value)){
var content_list=document.createElement("li");
content_list.innerHTML=text_box.value;
if (dir==="left") {
content_box.insertBefore(content_list,content_box.childNodes[0]);
text_box.value="";
}else if(dir==="right"){
content_box.appendChild(content_list);
text_box.value="";
}
}else{
alert("请输入0-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);
}
}
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);
content_box.addEventListener('click',function(e){
if(e.target.nodeName.toLowerCase() == 'li'){
content_box.removeChild(e.target);
}
});
}
</script>
</body>
</html>
对该任务出现的方法进行总结
1.判断值为数字类型的方法
可以使用 isNaN（val）来判断value值是否为数字类型
NaN顾名思义：not a number
2.正则表达式的验证
test()方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回true或false
regexObj.test(str)
str:用来与正则表达式匹配的字符串
3.子节点的插入
- appendChild() 方法：可以向节点的子节点列表的末尾添加新的子节点。语法：element.appendChild(newChild)；
- insertBefore()方法：可以在已有子节点前插入一个新的子节点。语法：element.insertChild(newchild,refchild)
4.获取元素子节点集合
childNodes 属性返回节点的子节点集合。
语法：var nodeList = elementNodeReference .childNodes;
节点集合中的项目是对象而不是字符串。
要从节点对象获取数据，请使用其属性（例如elementNodeReference.childNodes[1].nodeName获取名称等）。
5.获取子节点
- firstChild 获取父节点node的第一层第一个子节点，若不存在则返回null
语法： var child = node.firstChild; - lastChild 返回被选节点的最后一个子节点，如果选定的节点没有子节点，则该属性返回NULL。
6.事件监听器
**EventTarget.addEventListener() **方法将指定的监听器注册到 EventTarget
上，当该对象触发指定的事件时，指定的回调函数就会被执行。
7.toLowerCase()
toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回。语法：str.toLowerCase()
