<!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. CSS3形变——transform与transform-origin画时钟

    css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...

  2. JavaScript中冒泡排序

    在我大学的时候,就已经接触到过很多的排序方式,只是那时候听得还很懵懂,大概知道这么个东西,也对冒泡排序有点印象,但真要我写,我是写不出来的.最近,在回顾js基础的时候,又接触到了冒泡排序.于是,就把冒 ...

  3. 1934: [Shoi2007]Vote 善意的投票

    1934: [Shoi2007]Vote 善意的投票 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 1174  Solved: 723[Submit][S ...

  4. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

  5. css布局与盒子模型

    一.    盒子模型 注: 1.红色为border; 2.背景应用于内容.内边距.边框组成的区域: 3.Width和height指的是内容区域的高度和宽度. 边框属性: 1.  padding属性:( ...

  6. web从入门开始（3）-----第一个网页

    <meta>:是进行网页格式初始化的命令,确定网页使用的文本格式和编码格式 Background:中的路径,必须为相对路径 l  HTML文本标记 <b>HTM文本</b ...

  7. RabbitMQ-从基础到实战（4）— 消息的交换（下）

    0.目录 RabbitMQ-从基础到实战(1)- Hello RabbitMQ RabbitMQ-从基础到实战(2)- 防止消息丢失 RabbitMQ-从基础到实战(3)- 消息的交换(上) 1.简介 ...

  8. Http相关

    1.http请求 http请求分为三部分:请求行,请求头,请求正文 1. 请求行 请求方式  GET   POST 请求资源路径 协议版本 GET与POST请求区别? get只能传递1kb以下数据,P ...

  9. 微服务--webapi实现，脱离iis，脱离tomcat

    前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...

  10. 转：Java中finally和return的执行关系

    finally可以分两方面理解 1.执行时机问题.finally总会执行(除非是System.exit()),正常情况下在try后执行,抛异常时在catche后面执行 2.返回值问题.可以认为try( ...