<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin: 0px; padding: 0px; } #wrap{ border: 1px solid #ccc; background: white; 300px; height:480px; margin:0 auto; position: relative; margin-top: 10px; } #text{ 270px; height: 400px; border: 1px solid #ccc; position: absolute; left: 15px; top:20px; } #face{ 24px; height: 24px; border: 1px solid #ccc; display: inline-block; background: url(images/icon4.png); left:15px; top:435px; position: absolute; } #writen{ height: 24px; position: absolute; top:435px; left: 50px; 180px; border-radius: 5px; } #button{ position: absolute; right: 15px; height: 25px; 40px; top:435px; } .right{ position:absolute; right:33px; background:pink; padding:2px; } .left{ position:absolute; left:33px; background:#ccc; padding:2px; } </style> <script> window.onload = function (){ var oText = document.getElementById("text"); var oFace = document.getElementById("face"); var aInput = document.getElementsByTagName("input"); var onff = true; aInput[1].onclick = function (){ if(!aInput[0].value){ alert("Please Input"); } else if( onff){ oText.innerHTML = '<p style="height:25px;line-height:25px;background:#ccc;float:right;margin-right:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon4.png"style="position:absolute;right:5px;">'+ aInput[0].value +'</p>' + oText.innerHTML; aInput[0].value = ""; } else { oText.innerHTML = '<p style="height:25px;line-height:25px;background:pink;float:left;margin-left:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon3.png"style="position:absolute;left:5px;">'+ aInput[0].value +'</p>' + oText.innerHTML; aInput[0].value = ""; } } oFace.onclick = function(){ if(onff){ oFace.style.background ="url(images/icon3.png)"; onff = !onff; } else { oFace.style.background ="url(images/icon4.png)"; onff = !onff; } } } </script> </head> <body> <div id = "wrap"> <div id = "text"> </div> <div id = "face"></div> <input type = "text" id = "writen"> <input type = "button" id = "button" value = "发送"> </div> </body> </html>