簡單的實(shí)現(xiàn)方式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#button{
display:inline-block;
}
ul{
list-style: none;
}
li{
background-color: red;
display:inline-block;
width:20px;
padding:10px;
margin-left:3px;
color:white;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oBtn1=document.getElementById('leftin');
var oBtn2=document.getElementById('rightin');
var oBtn3=document.getElementById('leftout');
var oBtn4=document.getElementById('rightout');
var oLi= document.getElementsByTagName('li');
//console.log(oBtn1);
var number=[];
var value;
var i=0;
oBtn1.onclick=function(){
//console.log(document.getElementsByTagName('input')[0].value);
value=document.getElementsByTagName('input')[0].value;
if(!/^[0-9]*$/.test(value))
alert("請輸入有效的數(shù)字");
else{
number.unshift(value);
//console.log(number);
show();
for (var i = 0; i < oLi.length; i++) {
console.log(oLi[i]);
oLi[i].onclick = function(e) {
oUl.removeChild(e.target);
}
};
value = '';
}
}
oBtn2.onclick=function(){
value=document.getElementsByTagName('input')[0].value;
if(!/^[0-9]*$/.test(value))
alert("請輸入有效的數(shù)字");
else{
number.push(value);
show();
for (var i = 0; i < oLi.length; i++) {
console.log(oLi[i]);
oLi[i].onclick = function(e) {
oUl.removeChild(e.target);
}
};
value = '';
}
}
oBtn3.onclick=function(){
alert(number.shift(number[number.length-1]));
show();
}
oBtn4.onclick=function(){
alert(number.pop(number[0]));
show();
}
/*var i1='document.getElementById("'+i+'")';
console.log(i1);
i1.onclick=function(){
var tar=parseInt(i1.getAttribute("id"));
number.splice(tar,1);
show();
console.log(1);
return number;
}*/
var oUl = document.getElementsByTagName('ul')[0];
console.log(oLi.length);
//alert(oLi.length);
/*oLi.onclick = function() {
console.log(1);
}*/
//console.log(oLi[0]);
for (var i = 0; i < oLi.length; i++) {
console.log(oLi[i]);
oLi[i].onclick = function(e) {
oUl.removeChild(e.target);
}
};
function show(){
var content=" ";
for(i=0;i<number.length;i++){
content+="<li>"+number[i]+"</li>";
}
result.innerHTML=content;
}
};
</script>
</head>
<body>
<input id="input" type="text">
<div id="button">
<button id="leftin">左側(cè)入</button>
<button id="rightin">右側(cè)入</button>
<button id="leftout">左側(cè)出</button>
<button id="rightout">右側(cè)出</button>
</div>
<ul id="result">
</ul>
</body>
</html>
這種方法原理是用For循環(huán)來為li添加點(diǎn)擊事件释移，然后點(diǎn)到它的時候去刪除ul的子節(jié)點(diǎn)
for (var i = 0; i < oLi.length; i++) {
console.log(oLi[i]);
oLi[i].onclick = function(e) {
oUl.removeChild(e.target);
}
};
這里需要說明一點(diǎn)，為什么不用
oUl.removeChild(oLi[i]);
因?yàn)樵邳c(diǎn)擊oLi[i]的時候辽狈，找不到所以的li節(jié)點(diǎn)慈参，而且在這里的我們耶不是想要找所有的li節(jié)點(diǎn)，而是想找當(dāng)前的刮萌。
所以驮配，這里可以用
oUl.removeChild(e.target);
或
oUl.removeChild(this);
在這里說一下target
target 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)），如生成事件的元素着茸、文檔或窗口壮锻。
然后就是一種高級一點(diǎn)的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task18</title>
<style>
#button{
display:inline-block;
}
ul{
list-style: none;
}
li{
background-color: red;
display:inline-block;
width:20px;
padding:10px;
margin-left:3px;
color:white;
}
</style>
</head>
<body>
<input id="input" type="text">
<div id="button">
<button id="leftin">左側(cè)入</button>
<button id="rightin">右側(cè)入</button>
<button id="leftout">左側(cè)出</button>
<button id="rightout">右側(cè)出</button>
</div>
<ul id="result">
</ul>
<script>
var $=function(id){
return document.getElementById(id);
}
var number=[];
//給按鈕的父元素添加事件委托，避免給每個按鈕添加點(diǎn)擊事件
$("button").addEventListener("click",function(e){
var target=e.target,
value=$("input").value;
switch(target.id){
case "leftin":{
if(!/^\d+$/.test(value))alert("請輸入有效的數(shù)字");
else{
number.unshift(value);
show();
}
break;
}
case "rightin":{
if(!/^\d+$/.test(value)) alert("請輸入有效的數(shù)字");
else{
number.push(value);
show();
}
break;
}
case "leftout":{
alert(number.shift(number[number.length-1]));
show();
break;
}
case "rightout":{
alert(number.pop(number[0]));
show();
break;
}
}
})
//給輸出的結(jié)果添加事件委托涮阔，使點(diǎn)擊的元素被刪除
$("result").addEventListener("click",function(e){
var target=e.target;
if(target.nodeName!="LI") return;
var tar=parseInt(target.getAttribute("id")); //到被點(diǎn)擊元素的id屬性猜绣，之前id綁定的是該元素在數(shù)組中的序號
number.splice(tar,1); //刪除數(shù)組number中的元素，1代表只刪除一個元素
show();
return number;
})
//將得到的用戶輸入數(shù)據(jù)輸出顯示到id為result的列表中
function show(){
var content=" ";
for(var i=0;i<number.length;i++){
content+="<li id='"+i+"'>"+number[i]+"</li>";
}
result.innerHTML=content;
}
</script>
</body>
</html>
它的主要亮點(diǎn)是刪除數(shù)組中的對應(yīng)項(xiàng)來達(dá)到刪除li的效果
$("result").addEventListener("click",function(e){
var target=e.target;
if(target.nodeName!="LI") return;
var tar=parseInt(target.getAttribute("id")); //到被點(diǎn)擊元素的id屬性敬特，之前id綁定的是該元素在數(shù)組中的序號
number.splice(tar,1); //刪除數(shù)組number中的元素掰邢，1代表只刪除一個元素
show();
return number;
這個代碼還有一個亮點(diǎn)就是用了case語句，從而只添加了一個監(jiān)聽事件伟阔。
寫這個小dome給我的感受是辣之，我在寫代碼的過程中多思考的是html中元素的問題。插入和刪除我都會從刪除文本節(jié)點(diǎn)的方面去考慮皱炉，對js的應(yīng)用處于表層召烂，而別人的代碼，則是基于一些js自帶的函數(shù)考慮娃承，更符合一門編程語言奏夫。這是我以后需要學(xué)習(xí)的。
