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.未能显示评论 ...
随机推荐
- ThinkPHP3.2版本对于Model的使用
THinkphp3.2的改动很大,特别是应用了命名空间的概念,这个命名空间很类似于.NET和Java的命名空间,通过引用就可以调用,由于前期一直是搞.NET,对命名空间自认为是比较了解的,在没有完全理 ...
- Leetcode题目34.在排序数组中查找元素的第一个和最后一个位置（中等）
题目描述: 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标 ...
- HDX Insight Installation & Configuration
NetScaler Insight Center 11.1 Installation & Configuration NetScaler Insight Center 11.0 Insta ...
- koa 项目实战（一）创建项目
1.安装模块 npm install koa koa-router --save npm install -g nodemon 2.入口文件 app.js const Koa = require('k ...
- WebStrom编程小技巧--HTML快速创建指定id或者类名的div
打印div标签快速方法:“先打出#yz,然后Tab键补全即可获得<div id="yz"></div>同理:我们也可以先打出“.tz"然后Tab键 ...
- 1-mybatis-概览
mybatis 当前包如下: 1 annotations 注解相关配置 2 binding 绑定 3 builder 建造器, 主要使用的建造者模式 4 cache 缓存相关 5 cursor 游标 ...
- kvm虚拟机操作相关命令及虚拟机和镜像密码修改
虚拟机生命周期管理 1)查看kvm虚拟机状态 #virsh list --all 2)KVM虚拟机开机 # virsh start oeltest01 3)KVM虚拟机关机或断电 关机 默认情况下vi ...
- tensorflow实现线性回归总结
1.知识点 """ 模拟一个y = 0.7x+0.8的案例 报警: 1.initialize_all_variables (from tensorflow.python. ...
- matplotlib之条形图
1.知识点 1.plt.figure(figsize=(20,8),dpi=80)设置图像大小,主要参数为figsize(a,b) 2.plt.barh(range(len(a)),b,height= ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_2_04微服务下电商项目基础模块设计
笔记 4.微服务下电商项目基础模块设计 简介:微服务下电商项目基础模块设计 分离几个模块,课程围绕这个基础项目进行学习 小而精的方式学习微服务 1.用户服务 ...