<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyPhoneSend</title>
<style type="text/css">
#phoneOut{
width: 320px;
height: 500px;
border:1px solid #333;
border-radius: 10px;
margin-left: 30px;
}
#phoneIn{
width: 300px;
height: 450px;
border:1px solid yellow;
margin: 0 auto;
margin-top: 20px;
border-radius: 10px;
}
#phoneReception{
width: 300px;
height: 400px;
border-radius: 10px;
margin: 0 auto;
/*text-indent: 4px;*/
text-align: right;
/*text-decoration-color: green;*/
color: green;
}
#phoneOperation{
width: 295px;
height: 40px;
margin: 0 auto;
border:1px solid #A9A9A9;
position: relative;
}
#phoneImg{
display: inline-block;
width: 30px;
height: 28px;
margin: 0 auto;
border:1px solid yellow;
margin-top: 5px;
border-radius: 30px;
}
img{
width: 30px;
height: 28px;
}
#phoneSend{
width: 50px;
height: 30px;
position: absolute;
margin-top: 5px;
margin-left: 210px;
}
#phoneText{
position: absolute;
margin-top: 5px;
padding: 5px;
}
#left{
display: block;
background-color: green;
color: #fff;
float: left;
border-radius: 5px;
}
#right{
display: block;
float: right;
background-color: green;
color: #fff;
border-radius: 5px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oImg=document.getElementById('phoneImg');
var oImg1=document.getElementById('img1');
var oText=document.getElementById('phoneText');
var oSend=document.getElementById('phoneSend');
var oReception=document.getElementById('phoneReception');
var oleft=document.getElementById('left');
var oright=document.getElementById('right');
var num=1;
oImg.onclick=function(){
num=-num;
if(num==1){
oImg1.src="smell1.jpg";
oImg1.value="smell1.jpg";
}else if(num==-1){
oImg1.src="smell3.jpg";
oImg1.value="smell3.jpg";
}
}
oSend.onclick=function(){
var imgString;
var TextString;
if(num==1){
imgString='<img src="smell1.jpg" />';
}else if(num==-1){
imgString='<img src="smell3.jpg" />';
}
// 根据一个就是由于加号是一个字符串的形式，所以考虑将你所需要
// 进行的操作变成一个字符串。
oReception.innerHTML=oReception.innerHTML+ imgString +': '+oText.value+'<br />';
//
oText.value='';
}
}
</script>
</head>
<body>
<div id="phoneOut">
<div id="phoneIn">
<div id="phoneReception"><span id="left"></span><span id="right"></span></div>
<div id="phoneOperation">
<!-- <input id="phoneImg" type="button" name=""> -->
<span id="phoneImg" ><img id="img1" src="smell1.jpg"></span>
<input id="phoneText" type="text" size="30px" />
<input id="phoneSend" type="button" name="" value="Send">
</div>
</div>
</div>
</body>
</html>
