<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{margin-left: 500px;}
#div1{width: 230px; height: 80px; background-color: lavender; border: 1px solid gray;}
#div1 input{width: 210px; margin: 5px; font-size: 18px;}
#div1 button{margin:3px 8px; font-size: 14px;}
#div2 {width: 230px; height: 300px; background-color: rgb(246, 247, 248); border: 1px solid gray; border-bottom: gray dashed 1px;}
#div2 div{border-bottom: 1px dashed gray; position: relative;}
#div2 button{position: absolute; right: 0;}
</style>
<script>
window.οnlοad=function(){
var odiv1=document.getElementById('div1');
var odiv2=document.getElementById('div2');
var oinput=document.getElementById('input1');
var aBtns=odiv1.getElementsByTagName('button');
aBtns[0].οnclick=function(){
if(!oinput.value){
alert("输入的内容不能为空");
}else{
var newdiv=document.createElement("div")
var text=document.createTextNode(oinput.value);
newdiv.appendChild(text);
newdiv.style.backgroundColor=random();
odiv2.appendChild(newdiv);
oinput.value='';
}
}
aBtns[1].οnclick=function(){
odiv2.removeChild(odiv2.lastChild);
}
aBtns[2].οnclick=function(){
var newnode=odiv2.lastChild.cloneNode(true);
odiv2.appendChild(newnode);
}
}
function random(){
var str="rgba("+parseInt(Math.random()*256)+','+parseInt( Math.random()*256)+","+parseInt( Math.random()*256)+",1)";
return str;
}
</script>
<body>
<div class="box">
<div id="div1">
<input type="text" id="input1" placeholder="请输入内容："/><br/>
<button>增加</button>
<button>删除</button>
<button>拷贝</button>
</div>
<div id="div2">
</div>
</div>
</body>
</html>
扫一扫
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
