<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#max{margin:0 auto; width:350px; height:500px; border:5px solid #000;}
#content{width:350px; height:435px; border-bottom:2px solid #999; overflow:auto; overflow-x:hidden; position:relative;}
#enter{width:350px; height:63px; position:relative; text-align:center;}
#back{width:38px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; position:absolute; top:12px; left:10px;}
#Text{width:222px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; background:#FFF; position:absolute; top:12px; left:58px; font-size:18px;}
#btn2{width:50px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; background:#FFF; top:12px; position:absolute; right:10px;}
.left{padding-left:30px;}
.right{padding-right:30px;}
.left img{left:0px; }
.right img{right:0px;}
.left span{background:#6C6; float:left; padding:5px;}
.right span{background:#CCC; float:right; padding:5px;}
p{ position:relative; overflow:auto; overflow-x:hidden; margin:0px 0px 5px 0px; word-break:break-all; font-size:18px; }
p img{position:absolute; top:0px; }
</style>
<script>
window.onload = function(){
var oImg = document.getElementById("img1");
var oBtn2 = document.getElementById("btn2");
var oText = document.getElementById("Text");
var oDiv = document.getElementById("content");
var oLink = document.getElementById("back");
var num = 0;
var onoff = true;
var arrUrl = ['../img/img5.jpg','../img/img6.jpg'];
oImg.src = arrUrl[num];
function ftn() {
oImg.src = arrUrl[num];
}
ftn();
//头像切换
oLink.onclick = function(){
ftn();
num++;
if (onoff){
num = 0;
onoff = false;
}
else{
num = arrUrl.length - 1;
onoff = true;
}
}
//短信内容区域
oBtn2.onclick = function(){
var oWord = 'left';
if( onoff){
oWord = 'left';
}
else{
oWord = 'right';
}
oDiv.innerHTML = '<br>' + '<p class="'+ oWord +'">' + oLink.innerHTML + '<span>' + '说：'+ oText.value +'</span>' + '</p>' +oDiv.innerHTML ;
oText.value = '';
}
}
</script>
</head>
<body>
<div id= "max">
<div id="content">
</div>
<div id="enter">
<a id="back" href="#"><img id="img1"/></a>
<input id="Text" type="text" />
<input id="btn2" type="button" value="发送" />
</div>
</div>
</body>
</html>
