<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea id="txt" cols="30" rows="10"></textarea><br>
<button id="btn" style="margin-left: 190px;">发表</button><br>
<div id="show"></div>
<script>
function $(id){
return document.getElementById(id);
}
var txt=$("txt");
var show=$("show");
var btb=$("btn");
txt.onfocus=function(){//得到焦点文本框内容清空
txt.value="";
}
var uls=document.createElement("ul"); //创建一个ul
show.appendChild(uls);//把ul插到show
btn.onclick=function(){//点击发表
var txtvalue=txt.value.replace(/<[^>]+>/g,"");//过滤<>
var lis=document.createElement("li");//创建一个li存放显示内容
lis.innerHTML=txtvalue+"<span style='width:30px;height20px;margin-left:20px;'>删除</span>";// li里面加“删除”
var lis1=uls.getElementsByTagName("li");
if(lis1.length>0){ //内容靠前
uls.insertBefore(lis,lis1[0]);
}
else{
uls.appendChild(lis);
}
txt.value='';//输入框清空
var spans=document.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].onclick=function(){//点击删除行
uls.removeChild(this.parentNode);
}
}
}
</script>
</body>
</html>

简单的留言板（dom+正则练习）的更多相关文章

  1. NVelocity 实现简单的留言板

    留言版简单实现 -------------------------------------------------------------------------------------------- ...

  2. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  3. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

  4. javaScript简单的留言板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. php+mysql 最简单的留言板

    学完了记得动手操作. 測试地址(未过滤) <html> <body> <head><meta http-equiv="Content-Type&qu ...

  6. vue2 简单的留言板

    没有写样式,只是写个功能 <template> <div class="headers"> <div class="form"&g ...

  7. 一个很简单的php留言板。。。。搭建在sae上的。。。

    我在sae上搭建了一个个人简历的页面: 有兴趣的可以访问  http://671coder.sinaapp.com/ 在做下面一个简单的留言板的时候,卡了我很久,虽然完全没用过php..但是还是最后勉 ...

  8. PHP实现简单留言板

    最近学习了下PHP基础,这里做一个简单的留言板,算是对PHP和MySQL的使用做一个整体的练习吧,不遇到问题总感觉学不到东西. 截图如下: 总结: 1>数据库的简单操作,数据库的增删改查: 2. ...

  9. 写一个简单的HTML留言板

    最近有点懒,没码什么字,防止遗忘,从头开始码,写一个简单的HTML留言板.包含两个文件,book.html还有style.css,放在同一目录下. book.html 1 <!DOCTYPE h ...

随机推荐

  1. 使用Task的一些知识优化了一下同事的多线程协作取消的一串代码

    最近在看一个同事的代码,代码的本意是在main方法中开启10个线程,用这10个线程来处理一批业务逻辑,在某一时刻当你命令console退出的时候,这个 时候不是立即让console退出,而是需要等待1 ...

  2. 自定义 Layout布局 UICollectionViewLayout

    from:   http://www.tuicool.com/articles/vuyIriN 当我们使用系统自带的UICollectionViewFlowLayout无法实现我们的布局时,我们就可以 ...

  3. (4)Object对象的几个常用方法

    Object对象是java中对象的始祖,其有一些方法是经常需要我们来改写的: toString方法 该方法是Object的方法,Object的这的方法返回的是对象的文件结构加上对象的hashcode, ...

  4. iOS回顾笔记（07） -- UITableView的使用和性能优化

    iOS回顾笔记(07) -- UITableView的使用和性能优化 如果问iOS中最重要的最常用的UI控件是什么,我觉得UITableView当之无愧!似乎所有常规APP都使用到了UITableVi ...

  5. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  6. C# 索引同时含有数字和字符串的集合 同时具备IList和IDictionary的特点

    同时具备IList和IDictionary的特点的集合 [Serializable] public class MyCollection:IList { private readonly Dictio ...

  7. HTTP [TCP Retransmission] Continuation or non-HTTP traffic[Packet size limited during capture]

    http://www.xianren.org/blog/net/wireshark-q.html  抓到的包数据中常见的错误..待细看,先记下. tcpdump 抓包后发现,出现大量标题字样显示,不利 ...

  8. 实时消息传输协议（RTMP）详解

    一.概念与摘要 RTMP协议从属于应用层,被设计用来在适合的传输协议(如TCP)上复用和打包多媒体传输流(如音频.视频和互动内容).RTMP提供了一套全双工的可靠的多路复用消息服务,类似于TCP协议[ ...

  9. 机器学习：Python中如何使用支持向量机(SVM)算法

    (简单介绍一下支持向量机,详细介绍尤其是算法过程可以查阅其他资) 在机器学习领域,支持向量机SVM(Support Vector Machine)是一个有监督的学习模型,通常用来进行模式识别.分类(异 ...

  10. 分布式文件管理系统_FastDFS集群

    简单介绍 1,client storage tracker的关系 先用一幅图来解释用户如何访问一个通过DFS管理的文件 一般来说,一台服务器只有一个storage server,多个storage s ...