<!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. Selenium 使用css selector (资源来源于网络)

    Selenium - CSS Selector 昨天我练习了用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements).S ...

  2. 从零开始学习Vue(三)

    我们从一个例子来学习组件,vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar 这个例子用到其他组件,对于初学者来说,一下子要了解那么多组件的使用,会变得一头雾水.所以我把这个例子改写了 ...

  3. 1639: [Usaco2007 Mar]Monthly Expense 月度开支

    1639: [Usaco2007 Mar]Monthly Expense 月度开支 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 593  Solved: ...

  4. 通过Servlet生成验证码图片

    原文出自:http://www.cnblogs.com/xdp-gacl/p/3798190.html 一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类, ...

  5. ubuntu 切换java环境，配置单独的用户环境

    执行命令:sudo  update-alternatives --config javaThere are 2 choices for the alternative java (providing ...

  6. [.net 面向对象程序设计深入]（26）实战设计模式——使用Ioc模式（控制反转或依赖注入）实现松散耦合设计（1）

    [.net 面向对象程序设计深入](26)实战设计模式——使用IoC模式(控制反转或依赖注入)实现松散耦合设计(1) 1,关于IOC模式 先看一些名词含义: IOC: Inversion of con ...

  7. ###服务（Service）

    Start服务开启方式 1)   创建服务 public class MyService extends Service 2)   添加注册表 <service android:name=&qu ...

  8. ubuntu14.04下安装有道词典

    1.打开官方下载链接:http://cidian.youdao.com/index-linux.html 2.下载相应版本的安装包 3.直接双击安装包进行安装 可能会存在软件打不开的情况,更新下系统, ...

  9. 基于Intranet的零件库管理信息系统设计--part01

    好吧,临近毕业的我,毕业设计还没开始做呢.时间不等人,再过两个月就要答辩了,我得开始做我的毕设了,虽然我现在还没能力完全把毕设做出来,但总得先迈出第一步吧.今天先做一小部分. 话不多说,先来看我得毕业 ...

  10. ABC: Always Be Coding

    ABC: Always Be Coding (原地址:https://medium.com/@davidbyttow/abc-always-be-coding-d5f8051afce2)   Be h ...