<!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>