<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟手机短信发送</title>
<style>
input,ul{
padding:0px;margin:0;
}
li{
list-style:none;
}
.clear{
zoom = 1;
}
.clear:after{
content:"";display:block;clear:both;overflow:hidden;
}
body{
background:url(smartisan.png) no-repeat 500px -30px;
}
.bottom{
width:262px;
height:42px;
padding:2px;
text-align:center;
position:absolute;
left:568px;
top:512px;
}
.bottom img{
border:1px solid #f1f1f1;
float:left;
}
.bottom input[type = "text"]{
width:176px;
height:38px;
float:left;
}
.bottom input[type = "button"]{
width:40px;
height:42px;
float:left;
}
#content{
width:264px;
height:420px;
position:absolute;
left:567px;
top:88px;
overflow:auto;
}
#content li{
}
#content #left_li img{
float:left;
}
#content #left_li p {
font:14px/30px "宋体";
float:left;
background-color:red;
max-width:200px;
}
#content #right_li img{
float:right;
}
#content #right_li p {
font:14px/30px "宋体";
float:right;
background-color:green;
max-width:200px;
}
</style>
<script>
window.onload = function(){
var oContent = document.getElementById("content");
var oChange = document.getElementById("change");
var oText = document.getElementById("text");
var oSend = document.getElementById("send");
var oNoff = true;
oChange.onclick = function(){
if(oNoff){
oChange.src = "face_2.png";
}else{
oChange.src = "face_1.png";
}
oNoff = !oNoff;
}
oSend.onclick = function (){
if(oNoff){
oContent.innerHTML = '<li id = "left_li" class = "clear"><img src = "face_1.png"/><p>' + oText.value + '</p></li>' + oContent.innerHTML;
}else{
oContent.innerHTML = '<li id ="right_li" class = "clear"><img src = "face_2.png"/><p>'+ oText.value +'</p></li>' + oContent.innerHTML;
}
oText.value = "";
}
}
</script>
</head>
<body>
<div id = "phone">
<ul id = "content">
</ul>
<div class = "bottom clear">
<img src = "face_1.png" id = "change"/><input type = "text"/ id = "text"/><input type = "button" value = "发送" id = "send"/>
</div>
</div>
</body>
</html>
下面是图片地址:打开从“http......ter"就可以看到!
![](https://img-blog.csdn.net/20171027212632996?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2NmMTk5MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20171027212805575?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2NmMTk5MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20171027212813894?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2NmMTk5MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)