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>

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

AngularJs学习笔记（制作留言板）
原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址这里总结一下学习的过程和笔记.另外,看看这篇文章 ...
jsp 用application对象制作留言板
<%@ page contentType="text/html; charset=gb2312"%> <html> <body> <for ...
PHP制作留言板
做基础的留言板功能需要三张表: 员工表,留言表,好友表首先造一个登入页面: <form action="drcl.php" method="post" ...
js简易留言板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
问题：关于一个贴友的js留言板的实现
需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...
用js做一个简单的留言板效果
html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...
原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
phpcms 留言板
相信很多用phpcms v9的站长都不是程序员,而我也是一个网页设计师,所以对制作模板还是可以对付的.但是一设计到自己写程序,就一个头两个大啦.之前公司的网站是用找别人用dede cms做的,后来我 ...
html的留言板制作（js）
这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

随机推荐

SRS之播放推流视频
1. 综述首先,推流直播的配置文件如下: # rtmp.conf listen 1935; max_connections 1000; daemon off; srs_log_tank consol ...
bedtools 用法大全
原文:https://cloud.tencent.com/developer/article/1078324 前言: bedtools等工具号称是可以代替普通的生物信息学数据处理工程师的!我这里用一个 ...
带事务管理的spring数据库动态切换
动态切换数据源理论知识项目中我们经常会遇到多数据源的问题,尤其是数据同步或定时任务等项目更是如此:又例如:读写分离数据库配置的系统. 1.相信很多人都知道JDK代理,分静态代理和动态代理两种,同样的 ...
nuros安全报告
We believe that great technology should benefit everyone. Self-driving vehicles promise to save live ...
Throwable 源码阅读
Throwable 属性说明 /** * Java 语言中所有错误和异常的基类,此类及其子类才能通过 throws 被 JVM 虚拟机抛出. * @since 1.0 */ public class ...
开源缓存框架之ASimpleCache
ASimpleCache 是一个为android制定的轻量级的开源缓存框架.轻量到只有一个java文件(由十几个类精简而来). 1.它可以缓存什么东西? 普通的字符串.JsonObject.Jso ...
C++数据结构之哈希表
哈希表的定义:哈希表是一种根据关键码去寻找值的数据映射结构,该结构通过把关键码映射的位置去寻找存放值的地方.键可以对应多个值(即哈希冲突),值根据相应的hash公式存入对应的键中. 哈希函数的构造要求 ...
golang(06)函数介绍
原文链接 http://www.limerence2017.com/2019/09/11/golang11/#more 函数简介函数是编程语言中不可缺少的部分,在golang这门语言中函数是一等公民 ...
[转] Maven 从命令行获取项目的版本号
[From]https://blog.soebes.de/blog/2018/06/09/help-plugin/ I bet you have been faced with the situati ...
java：shiroProject
1.backend_system Maven Webapp: LoginController.java: package com.shiro.demo.controller; import org ...

js制作留言板

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

随机推荐

热门专题