<!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>

js制作留言板的更多相关文章

  1. AngularJs学习笔记（制作留言板）

    原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章 ...

  2. jsp 用application对象制作留言板

    <%@ page contentType="text/html; charset=gb2312"%> <html> <body> <for ...

  3. PHP制作留言板

    做基础的留言板功能  需要三张表: 员工表,留言表,好友表 首先造一个登入页面: <form action="drcl.php" method="post" ...

  4. js简易留言板

      <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="U ...

  5. 问题：关于一个贴友的js留言板的实现

    需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...

  6. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  7. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  8. phpcms 留言板

    相信很多用phpcms v9的站长都不是程序员,而我也是一个网页设计师,所以对制作模板还是可以对付的.但是一设计到自己写程序,就一个头两个大啦.之前公司的网站是用找别人 用dede cms做的,后来我 ...

  9. html的留言板制作（js）

    这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

随机推荐

  1. Zjoi2010排列计数Perm

    这东西还是挺有思想的,道听途说一些东西,问问DuanYue同志,然后自己打表画树推了推,就搞出来了. 首先根据p i>p i/2(向下取整)这种形式,如果线段树学的好的人,一定能看出来,这是在唯 ...

  2. Requests 代理池

    Requests 本身不提供代理池,然而爬数据又要用,所以只能自己搞.其实还挺简单的.我也不知道为什么这么有用的 feature 一直没有被加入. import requests class Clie ...

  3. 使用Grizzy+Jersey搭建一个RESTful框架（）报错Exception in thread "main" java.lang.AbstractMethodError: javax.ws.rs.core.UriBuilder.uri(Ljava/lang/String;)Ljavax/ws/rs/core/UriBuilder;

    报错的类涉及UriBuilder,我搜索类发现, 这个类存在于两个包中,我在baidu的时候,也有人提到是jar包冲突,我就删除了 这个依赖,问题解决了. 环境搭建过程请见地址https://blog ...

  4. Unexpected ConvertTo-Json results? Answer: it has a default -Depth of 2

    Unexpected ConvertTo-Json results? Answer: it has a default -Depth of 2 问题 Why do I get unexpected C ...

  5. ftp相关

    已经存在虚拟账户 添加新账户 .在/etc/vsftpd/user.txt里面配置用户名密码 单行是用户名 双行是密码 .导入新用户密码 db_load -T -t hash -f /etc/vsft ...

  6. 【Azure】用“Azure Storage Exlporer”进行磁盘拷贝

    zure Storage Explorer工具的下载 Azure 存储客户端工具 https://docs.azure.cn/zh-cn/storage/storage-explorers Azure ...

  7. idea出现灰色或者黄色的波浪线如何去除

    1.File--setting--Editor-Inspections-Geneal-Duplicated Code 去除 主要是类中出现太多的重复代码,idea自动提示.

  8. LC 677. Map Sum Pairs

    Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...

  9. EDM数据营销之电商篇| 六大事务性邮件，环环相扣打造极致用户体验！

    “以用户为中心”的时代,电商们致力于打造极致的用户体验,想尽各式新颖营销办法,但难免还是会出现营销断层,以至于和用户间无法达到完整的交互. 本次Focussend以邮件营销为例,聚焦用户从浏览到支付等 ...

  10. 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_6 响应json数据之过滤静态资源

    先搭建环境 webapp目录下创建js的文件夹.然后里面引入jquery.min.js这个文件. 页面引入这个js文件 先alert弹窗做测试 服务器重新部署 点击ajax的按钮 并没有起作用 我们在 ...