![實現效果圖]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬手機發送短信</title>
<style type="text/css">
*{padding:0;margin: 0;list-style: none;box-sizing: border-box;}
.box{width: 260px;height: 430px;border: 4px solid #000;}
.dialog{
border-bottom: 1px solid #000;
width: 252px;
height: 380px;
margin-bottom: 5px;
padding: 5px;
}
.dialog>div{
margin-bottom: 5px;
}
.left{
background: url(img/1.png) -2px -3px no-repeat;
}
.left span{
margin-left: 30px;
background: green;
display: inline-block;
padding: 2px;
color: #fff;
font-size: 14px;
font-family: "微軟雅黑";
}
.right{
background: url(img/2.png) right -5px no-repeat;
position: relative;
overflow: hidden;
}
.right span{
background: #ccc;
display: inline-block;
padding: 2px;
color: #fff;
font-size: 14px;
font-family: "微軟雅黑";
float: right;
margin-right: 32px;
}
.footer{
height: 34px;
position: relative;
}
.span1{
display: inline-block;
height: 30px;
width: 30px;
background: url(img/1.png);
margin-right: 5px;
}
#txt1{height: 30px;position:absolute;top: 3px; }
#btn1{height: 30px;position:absolute;top: 0px;right: 4px;border: none;
background: #fff; outline: none;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDialog=document.getElementById('dialog');
var oSpan1=document.getElementById('span1');
var oTxt1=document.getElementById('txt1');
var oBtn1=document.getElementById('btn1');
var onOff=true;
oSpan1.οnclick=function bg(){
if(onOff){
this.style.background='url(img/2.png)';
onOff=false;
return false;
}else{
this.style.background='url(img/1.png)';
onOff=true;
return true;
}
}
oBtn1.οnclick=function(){
if(oTxt1.value==''){
alert('請輸入內容！');
}else if(onOff){
oDialog.innerHTML+='<div class="left"><span>'+oTxt1.value+'</span></div>';
oTxt1.value='';
}else{
oDialog.innerHTML+='<div class="right"><span>'+oTxt1.value+'</span></div>';
oTxt1.value='';
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="dialog" id="dialog">
</div>
<div class="footer">
<span class="span1" id="span1"></span>
<input id="txt1" type="text" name="">
<input id="btn1" type="button" name="" value="發送">
</div>
</div>
</body>
</html>
