js制作留言板

时间：2023-03-10 04:22:00
js制作留言板 
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <div >

             <div align="center"><font color="crimson" size="7">留言板</font></div>

             <hr color="aqua" />

             <textarea id="messageText" style="height:200px;width: 100%;" cols="3"></textarea>

             <br/>

             <div align="center">

                 <a href="#">选择表情</a>

                 <img id="happy" src='开心.jpg' onclick='selectThis(this)'width='40'/>

                 <img id="contempt" src='鄙视.jpg' onclick='selectThis(this)'width='40'/>

                 <img id="naught" src='调皮.jpg' onclick='selectThis(this)'width='40'/>

                 <img id="astonishment" src='惊讶.jpg' onclick='selectThis(this)'width='40'/>

                 <img id="loveliness" src='可爱.jpg' onclick='selectThis(this)'width='40'/>

                 <img id="sweat" src='流汗.jpg' onclick='selectThis(this)'width='40'/>

                 <img id="sad" src='难过.jpg' onclick='selectThis(this)'width='40'/>

                 <img id="angry" src='生气.jpg' onclick='selectThis(this)'width='40'/>

                 <br /><br />

                 <input type="button"value="发表" onclick="handMess()" /><br />

                 <br /><br />

             </div>

             <div id="passMess" style="width: 100%;min-height: 200px;border: dashed 1px black;"></div>

             <br />

             <input type="button"value="清除全部" onclick="cclear()"/>

             <br />&nbsp;

             浏览数量：<span id="messSum"></span>

         </div>

     </body>

     <script type="text/javascript">

         var sum=1;

         function handMess(){

             var message = document.getElementById("messageText").innerHTML.toString();

             while( (message.indexOf("[开心]") > 0) || (message.indexOf("[鄙视]")> 0)||

             (message.indexOf("[调皮]") > 0) ||(message.indexOf("[惊讶]") > 0)

             ||(message.indexOf("[可爱]") > 0)||(message.indexOf("[流汗]") > 0)

             ||(message.indexOf("[难过]") > 0)||(message.indexOf("[生气]") > 0)){

                 message = message.replace("[开心]","<img src='开心.jpg' width='40px'/>");

                 message = message.replace("[鄙视]","<img src='鄙视.jpg' width='40px'/>");

                 message = message.replace("[调皮]","<img src='调皮.jpg' width='40px'/>");

                 message = message.replace("[惊讶]","<img src='惊讶.jpg' width='40px'/>");

                 message = message.replace("[可爱]","<img src='可爱.jpg' width='40px'/>");

                 message = message.replace("[流汗]","<img src='流汗.jpg' width='40px'/>");

                 message = message.replace("[难过]","<img src='难过.jpg' width='40px'/>");

                 message = message.replace("[生气]","<img src='生气.jpg' width='40px'/>");

             }

             message += "<br />"

             document.getElementById("passMess").innerHTML+=("&nbsp;&nbsp;" + sum+ "楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+message);

             document.getElementById("messageText").innerHTML="";

             sum++;

             document.getElementById("messSum").innerHTML=sum;

         }

         function cclear(){

             document.getElementById("passMess").innerHTML="";

         }

         //选表情

         function selectThis(t){

             var emo = t.src;

             var emoText = emo.toString();

             emoText = emoText.substring(emoText.length-6, emoText.length-4);

             document.getElementById("messageText").innerHTML+="[" + emoText + "]";

         }

     </script>

 </html>

相关文章