<!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. 开始JavaScript的学习了

    为何学习? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 4. 做为一个Web开发师,如果你想提供漂 ...

  2. Delphi之TClientSocket和TServerSocket使用tcp keepalive心跳机制实现“断网”、"断电"检测

    开发环境:Delphi7 测试环境:WinXP,Win7  32bit,Win7 64bit 使用TClientSocket和TServerSocket实现TCP长连接通讯,经常因为断电断网等原因导致 ...

  3. 【React自制全家桶】四、React中state与props的分析与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  4. Hibernate HelloWorld案例

    搭建一个Hibernate环境,开发步骤: 1. 下载源码 版本:hibernate-distribution-3.6.0.Final 2. 引入jar文件          hibernate3.j ...

  5. ServletRequest与ServletResponse

    http://lavasoft.blog.51cto.com/62575/275586/ 请求和相应是Web交互最基本的模式,在Servlet中,分别用HttpServletRequest与HttpS ...

  6. 《Neural Networks and Deep Learning》课程笔记

    Lesson 1 Neural Network and Deep Learning 这篇文章其实是 Coursera 上吴恩达老师的深度学习专业课程的第一门课程的课程笔记. 参考了其他人的笔记继续归纳 ...

  7. MySQL乱码的原因和设置UTF8数据格式

    https://segmentfault.com/a/1190000018662023 MySQL使用时,有一件很痛苦的事情肯定是结果乱码.将编码格式都设置为UTF8可以解决这个问题,我们今天来说下为 ...

  8. 【知乎】github,Empty reply from server？

    http://www.zhihu.com/question/26717343   问:用hexo搭了个blog,之前一直正常,最近在deploy的时候无法连接到github了. fatal: unab ...

  9. Django Model 基础数据库操作应用

    https://blog.csdn.net/Mrzhangjwei/article/details/53001841 一.数据库操作1.创建model表 基本结构: from django.db im ...

  10. python-Web-django-时间插件-三级联动

    时间插件: 第一步:下载 https://www.layui.com/laydate/ 下载插件包,放在项目的static 第二步:在html里引入js: <script src="/ ...