任務(wù)描述
- 模擬一個隊列，隊列的每個元素是一個數(shù)字，初始隊列為空
- 有一個input輸入框，以及4個操作按鈕
1.點擊"左側(cè)入"，將input中輸入的數(shù)字從左側(cè)插入隊列中；
2.點擊"右側(cè)入"，將input中輸入的數(shù)字從右側(cè)插入隊列中；
3.點擊"左側(cè)出"，讀取并刪除隊列左側(cè)第一個元素，并彈窗顯示元素中數(shù)值；
4.點擊"右側(cè)出"，讀取并刪除隊列又側(cè)第一個元素，并彈窗顯示元素中數(shù)值； - 點擊隊列中任何一個元素，則該元素會被從隊列中刪除
- 限制數(shù)字在1-100之間
效果圖
解決思路
從任務(wù)描述中可以看出本任務(wù)主要工作大致可以分為兩大塊：插入數(shù)據(jù)和刪除數(shù)據(jù)
因此我分為insert()插入方法和del()刪除方法,在insert()方法中對文本框中的數(shù)值根據(jù)任務(wù)要求進行驗證
整體代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>JS練習(xí)</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="左側(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è)出">
<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");
//判斷，如果有值并且符合判斷條件，添加這條數(shù)據(jù)數(shù)據(jù)
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("您輸入的不是數(shù)字");
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之間的數(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);
}
}
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>
對該任務(wù)出現(xiàn)的方法進行總結(jié)
1.判斷值為數(shù)字類型的方法
可以使用 isNaN（val）來判斷value值是否為數(shù)字類型
NaN顧名思義：not a number
2.正則表達式的驗證
test()方法執(zhí)行一個檢索，用來查看正則表達式與指定的字符串是否匹配。返回true或false
regexObj.test(str)
str:用來與正則表達式匹配的字符串
3.子節(jié)點的插入
- appendChild() 方法：可以向節(jié)點的子節(jié)點列表的末尾添加新的子節(jié)點。語法：element.appendChild(newChild)；
- insertBefore()方法：可以在已有子節(jié)點前插入一個新的子節(jié)點。語法：element.insertChild(newchild,refchild)
4.獲取元素子節(jié)點集合
childNodes 屬性返回節(jié)點的子節(jié)點集合。
語法：var nodeList = elementNodeReference .childNodes;
節(jié)點集合中的項目是對象而不是字符串。
要從節(jié)點對象獲取數(shù)據(jù)，請使用其屬性（例如elementNodeReference.childNodes[1].nodeName獲取名稱等）。
5.獲取子節(jié)點
- firstChild 獲取父節(jié)點node的第一層第一個子節(jié)點，若不存在則返回null
語法： var child = node.firstChild; - lastChild 返回被選節(jié)點的最后一個子節(jié)點，如果選定的節(jié)點沒有子節(jié)點，則該屬性返回NULL。
6.事件監(jiān)聽器
**EventTarget.addEventListener() **方法將指定的監(jiān)聽器注冊到 EventTarget
上，當(dāng)該對象觸發(fā)指定的事件時，指定的回調(diào)函數(shù)就會被執(zhí)行。
7.toLowerCase()
toLowerCase() 會將調(diào)用該方法的字符串值轉(zhuǎn)為小寫形式，并返回。語法：str.toLowerCase()
