js插入删除指定数字块

原创 437396649 随笔 JS 164阅读 2018-01-06 10:43:05 举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
思路:1.绑定相应变量
2.写出插入函数
2.1当插入为空,不是数字时弹对话框
2.2插入时,分为左插入或右插入(其中用到了insertBefore(内容,位置),在哪个位置的前面插入什么内容,appendChild(在末尾插入))
3.删除函数
3.1没有元素可以删除时(childNodes,子节点的集合)
3.2删除左侧或右侧元素(removeChild(要删除哪个子节点))
4.绑定按钮
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
li{
display: inline-block;
text-align: center;
font-size: 30px;
padding: 0 15px;
margin: 5px 5px;
height: 50px;
line-height: 50px;
background-color: #FF0000;
color: #FFFFFF;
}
</style>
<title>无标题文档</title>
</head>

<body>
<input type="text" id="innum" name="number">
<input type=button value="左侧入" id="leftin">
<input type=button value="右侧入" id="rightin">
<input type=button value="左侧出" id="leftout">
<input type=button value="右侧出" id="rightout">
<ul id="outnum"></ul>
<script>
//绑定变量
var innum=document.getElementById("innum");
var outnum = document.getElementById("outnum");
var leftin = document.getElementById("leftin");
var rightin = document.getElementById("rightin");
var leftout = document.getElementById("leftout");
var rightout = document.getElementById("rightout");
function insert(direction){
var n=innum.value;
if(n=="")
alert("请输入值!");
else if(isNaN(n)){
alert("请输入数字!");
n=="";
}
else{
var newli=document.createElement("li");
newli.innerHTML=n;
if(direction==="left")//点击左侧按钮插入
outnum.insertBefore(newli,outnum.firstChild);//insetBefore指在outnum的第一个地方的前方插入newli
else if(direction === "right"){ //点击右侧按钮插入
outnum.appendChild(newli);//将生成的li元素从末尾放入
}
}
}

function del(node,direction){
if(outnum.childNodes.length<=0)//childNodes表示子节点的集合
alert("不存在元素可以删除");
else if(direction==="left"){
alert("删除数字:" +outnum.firstChild.innerText +"!");
outnum.removeChild(outnum.firstChild);
}
else if(direction === "right"){ //点击右侧按钮删除
alert("删除数字:" +outnum.lastChild.innerText +"!");
outnum.removeChild(outnum.lastChild);
}
}
leftin.onclick = function(){insert("left");};
rightin.onclick = function(){insert("right");};
leftout.onclick = function(){del(-1,"left");};
rightout.onclick = function(){del(-1,"right");};
</script>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复