核心提示：效果图 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title/titlestylebody{padding: 50px;}#p1{height: 3...
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
padding: 50px;
}
#p1{
height: 300px;
width: 400px;
border: 1px solid red;
}
#inp{
width: 220px;
margin-top: 20px;
margin-right: 20px;
}
#img1{
width: 30px;
height: 30px;
}
.pic{
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<p id="p1"></p>
<img src="img/1.png" width="30px" height="30px" id="img1" index="0"/>
<input type="text" id="inp"/>
<input type="button" id="but" value="发送"/>
<input type="button" id="but1" value="清除"/>
<script>
var oinp = document.getElementById("inp");
var obut = document.getElementById("but");
var op = document.getElementById("p1");
var obut1 = document.getElementById("but1");
var oimg = document.getElementById("img1");
var imgarray = ["img/1.png","img/2.png","img/3.png"];
obut.onclick = function(){
var inptext = oinp.value;
var oim = document.createElement("img");
var op = document.createElement("p");
var oa = document.createElement("a");
var index = oimg.getAttribute("index");
var textNode = document.createTextNode(inptext);
oim.setAttribute("src",imgarray[parseInt(index)]);
oim.setAttribute("class","pic");
oa.innerHTML = " 删除";
oa.onclick = function(){
op.removeChild(this.parentNode);
}
op.appendChild(oim);
op.appendChild(textNode);
op.appendChild(oa);
op.appendChild(op);
oinp.value = "";
}
obut1.onclick = function(){
var allnode = op.children;
for(var i = 0; i < allnode.length; i++ ){
op.removeChild(allnode[i]);
}
}
oimg.onclick = function(){
var i = this.getAttribute("index");
if(i<imgarray.length-1){
i++;
}else{
i = 0;
}
this.setAttribute("index",i);
this.setAttribute("src",imgarray[i]);
}
</script>
</body>
</html>
