显示三个输入框和三个按钮。可以输入相应的数字进行相应的操作。当输入的数字不合理是就会弹窗、
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="creat" /><input id="creatBtn" type="button" value="创建" /><br />
<input type="text" id="dele" /><input id="deleBtn" type="button" value="删除"/><br />
<input type="text" id="show" /><input id="showBtn" type="button" value="显示" /><br />
<div id="divOne">
</div>
</body>
<script type="text/javascript">
var divOn = document.getElementById("divOne");
var subArr = divOn.children;
var creatDiv = document.getElementById("creat");
var deleDiv = document.getElementById("dele");
var showDiv = document.getElementById("show");
creatBtn.onclick = function(){
var inputCount = Number(creatDiv.value);
var showCount = divOn.children.length + 1;
//alert(inputCount);
//alert(showCount)
if(inputCount > showCount){
alert("请输入小于等于"+showCount+"的数字");
creatDiv.value = null;
creatDiv.focus();
} else if(inputCount>0){ // 符合要求,添加div
//alert("fuji")
var subDiv = document.createElement("div");
subDiv.style.width = "200px";
subDiv.style.height = "100px";
subDiv.style.backgroundColor = "red";
subDiv.innerHTML = "<h1>fujichao<h1/>"
divOn.insertBefore(subDiv,subArr[inputCount+1]);
creatDiv.value = null;
creatDiv.focus();
}
}
deleBtn.onclick = function(){
var inputCount = Number(deleDiv.value);
//alert(inputCount);
var showCount = divOn.children.length -1;
if(inputCount >= showCount+1){
alert("请输入小于"+showCount+"的数字");
deleDiv.value = null;
deleDiv.focus();
} else if(inputCount>=0){ // 删除div
divOn.removeChild(subArr[inputCount]);
alert("输入的是数组下标为"+inputCount+"的数数")
//alert("fujicaho")
deleDiv.value = null;
deleDiv.focus();
}
}
showBtn.onclick = function(){
var inputCount = Number(show.value);
//alert(inputCount);
var showCount = divOn.children.length - 1;
if(inputCount > showCount){
alert("请输入小于"+showCount+"的数字");
show.value = null;
show.focus();
} else if(inputCount>=0){ // 删除div
//alert(inputCount);
alert("输入的是数组下标为"+inputCount+"的数数")
//alert(inputCount);
show.value = null;
show.focus();
}
}
</script>
</html>