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;width: 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="width: 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>