• 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>
  • 相关阅读:
    【游戏开发】Excel表格批量转换成CSV的小工具
    iOS
    iOS
    Xcode
    iOS
    iOS
    iOS
    iOS
    iOS
    iOS
  • 原文地址:https://www.cnblogs.com/lyxcode/p/7745280.html
Copyright © 2020-2023  润新知