<!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. KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-handlebars

    koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...

  2. 使用awk截取某时间段的日志

    想要取出文件里面时间是9点到12点的数据,文件内容如下: 2012-09-05 01:48:47,150 WARN  [WorkManager(3)-72] [service.PhoneRangeMa ...

  3. java-信息安全（七）-基于非对称加密，对称加密等理解HTTPS

    概述 java-信息安全(一)-BASE64,MD5,SHA,HMAC java-信息安全(二)-对称加密算法DES,3DES,AES,Blowfish,RC2,RC4 java-信息安全(四)-数据 ...

  4. 【转载】扩展Robot Framework,实现失败用例自动再执行（失败重跑）

    使用自动化脚本进行测试,经常受环境影响等各方面导致本能成功的脚本失败,下面介绍了RFS框架下,失败重跑的方法: 通过改写RobotFramework源代码增加--retry选项,实现test级别的失败 ...

  5. 免费搭建wordpress博客有感

    之前一直有搭建个wordpress博客的想法,但一直没有实施.最近离职之后,空闲时间多了起来,就开始折腾wordpress博客起来. wordpress博客可玩性很高,但刚开始只想练练手,就没有想买域 ...

  6. pycharm社区版无database 解决方法

    第一步,点击file/setting/plugins 如下图所示 第二步,搜索database 安装database Nivagator 并Apply 第三步,新建数据库连接,open sql con ...

  7. Telnet 在win7 和 xp中的使用

    telnet 默认在开启之后 监听23端口.最近在尝试使用这个服务 虽然很多机器默认是不开启telnet这个服务的 但是 万一能够碰到 也是为了自己以后能够熟练起来咯. telnet有服务器跟客户端之 ...

  8. ATM取款~~

    package com.jredu.ch03; import java.util.Scanner; public class Atmmmmmmmmmm { static int totalMoney= ...

  9. 在调用相机后idleTimerDisabled失效的问题

    在调用相机后idleTimerDisabled失效的问题 相关资料: http://stackoverflow.com https://github.com/jamiemcd 问题 前几天有人在群里边 ...

  10. 集合框架(HashSet存储自定义对象保证元素唯一性)

    HashSet如何保证元素唯一性的原理 1.HashSet原理 a. 我们使用Set集合都是需要去掉重复元素的, 如果在存储的时候逐个equals()比较, 效率较低,哈希算法提高了去重复的效率, 降 ...