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.未能显示评论 ...
随机推荐
- Rust格式化输出
打印操作由 https://doc.rust-lang.org/std/fmt/ 里面所定义的一系列宏来处理,包括: format!:将格式化文本写到字符串(String).(译注:字符串是返 回值不 ...
- Zookeeper 安装及命令行操作
[参考文章]:[分布式]Zookeeper使用--命令行 [参考文章]:zookeeper的数据模型 [参考文章]:zookeeper ACL使用 1. 安装包下载 官方下载地址 选择一个具体的版本进 ...
- Python 图形界面元素
from tkinter import * import os def button_click1(): try: filePath = r'D:\CloudMusic' os.system(&quo ...
- koa 基础（六）应用级路由中间件
1.应用级路由中间件 app.js /** * 应用级路由中间件 */ // 引入模块 const Koa = require('koa'); const router = require('koa- ...
- TensorFlow 学习（4）——MNIST机器学习进阶
要进一步改进MNIST学习算法,需要对卷积神经网络进行学习和了解 学习材料参见https://www.cnblogs.com/skyfsm/p/6790245.html 卷积神经网络依旧是层级网络,只 ...
- Shutdown 源码阅读
Shutdown /** * 虚拟机关闭步骤 * @since 1.3 */ class Shutdown { /* 关闭状态 */ private static final int RUNNING ...
- PreparedStatement执行sql語句
import com.loaderman.util.JdbcUtil; import java.sql.Connection; import java.sql.PreparedStatement; i ...
- 八十五：redis之redis的事物、发布和订阅操作 (2019-11-18 22:54)
redis事物可以一次执行多个命令,事物具有以下特征1.隔离操作:事物中的所有命令都会序列化.按顺序执行,不会被其他命令打扰2.原子操作:事物中的命令要么全部被执行,要么全部都不执行 开启一个事物,以 ...
- iOS杂记-告警清理
NS_ASSUME_NONNULL_BEGIN @interface Robot : NSObject @property (copy,readonly) NSString *name; - (nul ...
- ubuntu搭建ssh服务
本人在ubuntu16.4.4.0-13下测试 #man uname//用于打印系统信息 sudo apt install update sudo apt install openssh-server ...