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 />
浏览数量：<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+=(" " + sum+ "楼 "+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.未能显示评论 ...
随机推荐
- HttpClient : java.net.SocketException: Connection reset
1. 问题排查 httpclient : 4.5.5 排查过程 : 一次SocketException:Connection reset 异常排查 主要原因 : 调用 http 请求时发生了 Sock ...
- 7 vi 编辑器
1.vim编辑器的工作模式 命令模式,插入模式,可视化模式,扩展命令模式. 2.命令模式 2.1.光标定位 hjkl:小键盘上下左右移动 0 $:行头.行尾 gg G:第一行.最后一行 30G:进入第 ...
- LeetCode 106. 从中序与后序遍历序列构造二叉树（Construct Binary Tree from Inorder and Postorder Traversal）
题目描述 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 postorder = [9 ...
- 认识HTML语言（CodePen）
认识HTML语言 1.一个网页的加载过程 2.Web技术全览 3.HTML语法 HTML语法(一):标签 HTML语法(四):网页结构 4.HTML常用元素 展示元素 (1)块级元素div (2)内联 ...
- tp5最强分页 自定义model，控制器引用。只显示一页
1.不多逼逼 model 代码 <?phpnamespace app\common\model; use think\Model; class Fpage{ private $page;//当前 ...
- Vue+elementUI+springboot+mybatis demo教程（二）
安装配置node.js安装vue并搭建前台项目前台项目引入elementUI前台项目引入axios本篇主要记录前台项目搭建之前的环境准备,首先要安装node.js(node官网),进行相关配置等. 安 ...
- 黑马lavarel教程---13、分页
黑马lavarel教程---13.分页 一.总结 一句话总结: - lavarel里面的分页操作和tp里面的分页操作几乎是一模一样的 - 控制器:$data=Lesson::paginate(2); ...
- 【编程漫谈】用JAVA画多边形
一门语言只要带图形库就可以编程画图了,用JAVA画图有两种方式,一是在内存中画好然后生成图片,就可以看到画图的效果了.另一个就是在窗口界面上直接画,可以实时看到程序的运行效果.刚开始学编程的时候,我加 ...
- [Java]用于将链表变成字符串并在元素之间插入分隔符的有用函数“String.join”
将链表变成字符串并在元素之间插入分隔符,这种动作最常见于组合sql文“select a,b,c from tb”这种场景scenario,其中a,b,c你是存贮在链表中的, 如果要加逗号要么在循环中识 ...
- 【React自制全家桶】七、React实现ajax请求以及本地数据mock
一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...