任務(wù)描述
- 模擬一個(gè)隊(duì)列，隊(duì)列的每個(gè)元素是一個(gè)數(shù)字到腥，初始隊(duì)列為空
- 有一個(gè)input輸入框雁比，以及4個(gè)操作按鈕
1.點(diǎn)擊"左側(cè)入"，將input中輸入的數(shù)字從左側(cè)插入隊(duì)列中；
2.點(diǎn)擊"右側(cè)入"柿扣，將input中輸入的數(shù)字從右側(cè)插入隊(duì)列中肖方；
3.點(diǎn)擊"左側(cè)出"闺魏，讀取并刪除隊(duì)列左側(cè)第一個(gè)元素未状，并彈窗顯示元素中數(shù)值；
4.點(diǎn)擊"右側(cè)出"析桥，讀取并刪除隊(duì)列又側(cè)第一個(gè)元素司草，并彈窗顯示元素中數(shù)值； - 點(diǎn)擊隊(duì)列中任何一個(gè)元素泡仗，則該元素會被從隊(duì)列中刪除
- 限制數(shù)字在1-100之間
效果圖
解決思路
從任務(wù)描述中可以看出本任務(wù)主要工作大致可以分為兩大塊：插入數(shù)據(jù)和刪除數(shù)據(jù)
因此我分為insert()插入方法和del()刪除方法,在insert()方法中對文本框中的數(shù)值根據(jù)任務(wù)要求進(jìn)行驗(yàn)證
整體代碼
<!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)的方法進(jìn)行總結(jié)
1.判斷值為數(shù)字類型的方法
可以使用 isNaN（val）來判斷value值是否為數(shù)字類型
NaN顧名思義：not a number
2.正則表達(dá)式的驗(yàn)證
test()方法執(zhí)行一個(gè)檢索娩怎，用來查看正則表達(dá)式與指定的字符串是否匹配搔课。返回true或false
regexObj.test(str)
str:用來與正則表達(dá)式匹配的字符串
3.子節(jié)點(diǎn)的插入
- appendChild() 方法：可以向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)。語法：element.appendChild(newChild)截亦；
- insertBefore()方法：可以在已有子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)爬泥。語法：element.insertChild(newchild,refchild)
4.獲取元素子節(jié)點(diǎn)集合
childNodes 屬性返回節(jié)點(diǎn)的子節(jié)點(diǎn)集合。
語法：var nodeList = elementNodeReference .childNodes;
節(jié)點(diǎn)集合中的項(xiàng)目是對象而不是字符串崩瓤。
要從節(jié)點(diǎn)對象獲取數(shù)據(jù)袍啡，請使用其屬性（例如elementNodeReference.childNodes[1].nodeName獲取名稱等）。
5.獲取子節(jié)點(diǎn)
- firstChild 獲取父節(jié)點(diǎn)node的第一層第一個(gè)子節(jié)點(diǎn)却桶，若不存在則返回null
語法： var child = node.firstChild; - lastChild 返回被選節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)境输，如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回NULL颖系。
6.事件監(jiān)聽器
**EventTarget.addEventListener() **方法將指定的監(jiān)聽器注冊到 EventTarget
上嗅剖，當(dāng)該對象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會被執(zhí)行嘁扼。
7.toLowerCase()
toLowerCase() 會將調(diào)用該方法的字符串值轉(zhuǎn)為小寫形式信粮，并返回。語法：str.toLowerCase()
