<!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. MySQL分区表的局限和限制

    禁止构建 分区表达式不支持以下几种构建: 存储过程,存储函数,UDFS或者插件 声明变量或者用户变量 可以参考分区不支持的SQL函数 算术和逻辑运算符 分区表达式支持+,-,*算术运算,但是不支持DI ...

  2. Android -- 自定义ScrollView实现放大回弹效果

    1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下: 2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部分方法,所以这里我们要把布局分成两部分,对应的布局文件效果 ...

  3. 记 suds 模块循环依赖的坑-RuntimeError: maximum recursion depth exceeded

    下面是soa接口调用的核心代码 #! /usr/bin/python # coding:utf-8 from suds.client import Clientdef SoaRequest(wsdl, ...

  4. Android权限解释

    属性 说明 android.permission.ACCESS_CHECKIN_PROPERTIES 允许读写访问 "properties"表在checkin数据库中,改值可以修改 ...

  5. ES6是什么

    编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化.编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类 ...

  6. node.js报错throw err; // Rethrow non-MySQL errors e:\serverTest\node_modules\mysql\lib\protocol\Parser.js:79 解决方法

    今天在用node+angular做后台时,需要使用session保存登陆状态的时候,遇到了此问题,问题直译为非mysql问题,我也在后台取到的登陆用户名和密码,确实不是数据库问题.最后发现在使用ses ...

  7. centos6.5安装配置supervisor

    1.下载并安装supervisor https://pypi.python.org/pypi/supervisor/3.2.0 .tar.gz cd supervisor- python setup. ...

  8. Linux下Scala（2.12.1）安装

    一.文件准备 1.1 文件名称 scala-2.12.1.tgz 1.2 下载地址 http://www.scala-lang.org/download/2.12.1.html 二.工具准备 2.1 ...

  9. Oeacle创建表空间

    /*第1步:创建临时表空间 */ create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i\user_tem ...

  10. 【Egret】Wing3发布移动APP功能，打包APK流程以及会遇到的问题

    流程:1.安装好wing 3,然后 插件--Egret项目工具--发布移动APP--Build android native project 2.配置发布环境: Android 1.egret eng ...