<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>模仿短信对话</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
#div1 {
width: 300px;
height:300px;
border: 1px solid red;
position: absolute;
}
#div2{
width: 240px;
height: 200px;
border:1px solid black;
padding: 10px;
margin: 10px auto}
#div3{float: left}
#button{height: 40px;width: 60px;
margin-left: 20px}
#text{ height: 40px;width:150px;line-height: 20px;
margin-left: 40px}
#img1{height: 20px;width: 20px;border: 1px solid black;
}
</style>
<script>
window.onload=function oo(){
var oDiv2=document.getElementById("div2");
var oBtn1=document.getElementById("button1");
var oText=document.getElementById("text");
var oImg=document.getElementById("img1");
var arrUrl=["img1.jpg","img2.jpg"]
var num=0
oBtn1.onclick=function(){
num=0;
oImg.src=arrUrl[num];
oDiv2.innerHTML=oText.value;
oText.value="";
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
<div id="div3">
<img id="img1">
<input id="text" type="text">
<input id="button1" type="button" value="发送">
</div>
</div>
</body>
</html>陈士愚
陈士愚