<!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. C++入门经典-例9.3-类模板，简单类模板

    1:使用template关键字不但可以定义函数模板,而且可以定义类模板.类模板代表一族类,它是用来描述通用数据类型或处理方法的机制,它使类中的一些数据成员和成员函数的参数或返回值可以取任意数据类型.类 ...

  2. Win10 的微软输入法输入稍快竟然会导致死机

    一周前,新装机器一次,竟然死机两三次,多发生在敲字时,最近逐步排查发现的这个问题,查阅了一下网上方案,果断采用了第三方输入法,至今没再死机过. 不过第三方输入法也不安分,是不是推送点头条新闻过来,和驱 ...

  3. [Java]手动构建表达式二叉树，求值，求后序表达式

    Inlet类,这颗二叉树是”人力运维“的: package com.hy; public class Inlet { public static void main(String[] args) th ...

  4. 6.HBase时髦谨慎财会会计

    1.基本概念和原理 2.核心知识点 3.安装部署 4.Hbase开发

  5. 2.HDFS和HA

    1.HDFS简介 DataNode NameNode SecondaryNameNode HDFS文件权限 2.HDFS小结 3.HDFS交互操作 4.HDFS编程访问接口

  6. C++中的各种容器实现原理

    C++ 容器及选用总结 vector 拥有一段连续的内存空间 list 就是数据结构中的双向链表 deque 的动态数组首尾都开放 set 有序的容器,红黑树的平衡二叉检索树的数据结构 multise ...

  7. 转： zepto的使用方法

    有些不了解zepto的同学在刚接触的时候肯定有很多疑惑,这个东西怎么用啊,去哪里下载啊,什么时候该用什么时候不该用啊,其实我以前也是这样的.jquery使用多了那么就让我们一起来了解下zepto把. ...

  8. 如何用 putty 连接远程 Linux 系统

    如何用 putty 连接远程 Linux 系统 Putty 简介 Putty 是一个免费的.Windows x86 平台下的 Telnet.SSH 和 Rlogin 客户端,但是功能丝毫不逊色于商业的 ...

  9. Spring Data JPA 介绍

    Spring-data-jpa的基本介绍:JPA诞生的缘由是为了整合第三方ORM框架,建立一种标准的方式,百度百科说是JDK为了实现ORM的天下归一,目前也是在按照这个方向发展,但是还没能完全实现.在 ...

  10. Pythonnumpy提取矩阵的某一行或某一列的实例

    Python numpy 提取矩阵的某一行或某一列的实例 下面小编就为大家分享一篇Python numpy 提取矩阵的某一行或某一列的实例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看 ...