1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <div > 10 <div align="center"><font color="crimson" size="7">留言板</font></div> 11 <hr color="aqua" /> 12 <textarea id="messageText" style="height:200px; 100%;" cols="3"></textarea> 13 <br/> 14 <div align="center"> 15 <a href="#">选择表情</a> 16 <img id="happy" src='开心.jpg' onclick='selectThis(this)'width='40'/> 17 <img id="contempt" src='鄙视.jpg' onclick='selectThis(this)'width='40'/> 18 <img id="naught" src='调皮.jpg' onclick='selectThis(this)'width='40'/> 19 <img id="astonishment" src='惊讶.jpg' onclick='selectThis(this)'width='40'/> 20 <img id="loveliness" src='可爱.jpg' onclick='selectThis(this)'width='40'/> 21 <img id="sweat" src='流汗.jpg' onclick='selectThis(this)'width='40'/> 22 <img id="sad" src='难过.jpg' onclick='selectThis(this)'width='40'/> 23 <img id="angry" src='生气.jpg' onclick='selectThis(this)'width='40'/> 24 <br /><br /> 25 <input type="button"value="发表" onclick="handMess()" /><br /> 26 <br /><br /> 27 </div> 28 <div id="passMess" style=" 100%;min-height: 200px;border: dashed 1px black;"></div> 29 <br /> 30 <input type="button"value="清除全部" onclick="cclear()"/> 31 <br /> 32 浏览数量：<span id="messSum"></span> 33 </div> 34 35 </body> 36 <script type="text/javascript"> 37 var sum=1; 38 function handMess(){ 39 var message = document.getElementById("messageText").innerHTML.toString(); 40 while( (message.indexOf("[开心]") > 0) || (message.indexOf("[鄙视]")> 0)|| 41 (message.indexOf("[调皮]") > 0) ||(message.indexOf("[惊讶]") > 0) 42 ||(message.indexOf("[可爱]") > 0)||(message.indexOf("[流汗]") > 0) 43 ||(message.indexOf("[难过]") > 0)||(message.indexOf("[生气]") > 0)){ 44 message = message.replace("[开心]","<img src='开心.jpg' width='40px'/>"); 45 message = message.replace("[鄙视]","<img src='鄙视.jpg' width='40px'/>"); 46 message = message.replace("[调皮]","<img src='调皮.jpg' width='40px'/>"); 47 message = message.replace("[惊讶]","<img src='惊讶.jpg' width='40px'/>"); 48 message = message.replace("[可爱]","<img src='可爱.jpg' width='40px'/>"); 49 message = message.replace("[流汗]","<img src='流汗.jpg' width='40px'/>"); 50 message = message.replace("[难过]","<img src='难过.jpg' width='40px'/>"); 51 message = message.replace("[生气]","<img src='生气.jpg' width='40px'/>"); 52 } 53 54 message += "<br />" 55 document.getElementById("passMess").innerHTML+=(" " + sum+ "楼 "+message); 56 document.getElementById("messageText").innerHTML=""; 57 sum++; 58 document.getElementById("messSum").innerHTML=sum; 59 } 60 function cclear(){ 61 document.getElementById("passMess").innerHTML=""; 62 } 63 //选表情 64 function selectThis(t){ 65 var emo = t.src; 66 var emoText = emo.toString(); 67 emoText = emoText.substring(emoText.length-6, emoText.length-4); 68 document.getElementById("messageText").innerHTML+="[" + emoText + "]"; 69 } 70 </script> 71 </html>