js制作留言板

 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 />&nbsp;
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+=("&nbsp;&nbsp;" + sum+ "楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+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>