<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ background:url(img/qq.jpg) no-repeat; 556px; height:535px; margin:10px auto; position:relative; display:block; } #box{ position:absolute; top:100px; left:10px; height:270px; 385px; display:block; font-size:16px; overflow:auto; } #box div{ 20px; display:inline-block; font-size:16px; margin:2px 0; } select{ position:absolute; top:381px; left:5px; } textarea{ border:none; position:absolute; 385px; height:75px; left:10px; top:415px; font-size:16px; } input{ position:absolute; top:505px; left:320px; 80px; cursor:pointer; } div img{ 16px; height:16px; } </style> <script type="text/javascript"> window.onload = function () { var obtn = document.getElementsByTagName('input')[0]; var oselect = document.getElementsByTagName('select')[0]; var obox = document.getElementById('box'); var otext = document.getElementsByTagName('textarea')[0]; var json = { 'love':'img/love.gif', 'knife':'img/knife.gif' } obtn.onclick = function () { var str = otext.value; if(str == '') { alert('请输入内容'); } if(oselect.value == 'default') { obox.innerHTML += str + '<br>'; otext.value = ''; } for( attr in json) { usefont(attr,json[attr],str); } }; function usefont(fontstyle,url,str) { if(fontstyle == oselect.value) { var arr = str.split(''); var str = ''; for( var i = 0; i < arr.length; i++ ) { obox.innerHTML += '<div><img src = "' + url + '"><span>' + arr[i] + '</span></div>'; } obox.innerHTML += str + '<br>'; otext.value = ''; } } }; </script> </head> <body> <div id="wrap"> <div id="box"></div> <select id="font-style"> <option value="love">爱心文字</option> <option value="knife">小刀文字</option> <option selected="" value="default">默认文字</option> </select> <textarea></textarea> <input type="button" value="发送"> </div> </body> </html>