<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
li{list-style:none;}
li{position:relative;width:500px;}
a{position:absolute;right:10px;}
</style>
<script>
var count = 0;
window.onload = function(){
var arrInput = document.getElementsByTagName('input');
arrInput[0].focus();
arrInput[1].onclick = createMessageBoard;
arrInput[2].onclick = batchDelete;
}; function createMessageBoard(){
var arrInput = document.getElementsByTagName('input');
var arrUl = document.getElementsByTagName('ul'); if(arrInput[0].value == ''){
alert('没有内容输入!');
return false;
}
count++;
if(arrUl[0].children.length >4){
var oLast = arrUl[0].lastElementChild || arrUl[0].lastChild;
arrUl[0].removeChild(oLast);
}
var liNode = document.createElement('li');
var checkNode = document.createElement('input');
checkNode.type = 'checkbox';
checkNode.name = 'delete';
checkNode.innerHTML = arrInput[0].value;
addElementNode(liNode,checkNode);
liNode.appendChild(document.createTextNode(" "+count+"."+" "+arrInput[0].value)); /*添加文字节点*/ var aNode = document.createElement('a');
aNode.href = 'javascript:;';
aNode.innerHTML = "删除";
aNode.onclick = function(){
arrUl[0].removeChild(this.parentNode);
}
liNode.appendChild(aNode);
addElementNode(arrUl[0],liNode);
arrInput[0].value = "";
} function addElementNode(obj,element){
if(obj.children[0]){
obj.insertBefore(element,obj.children[0]); /*在IE下如果第二个参数的节点不存在回报错,而在标准浏览器下不会出错,标准浏览器判断第二个参数不存在,则会自动转成appendChild添加*/
}else{
obj.appendChild(element);
} } function batchDelete(){
var arrUl = document.getElementsByTagName('ul');
var arrDeleteName = document.getElementsByName('delete');
if(!arrDeleteName.length){
alert('未选中任何留言!');
return false;
} for(var i=0;i<arrDeleteName.length;i++){
if(arrDeleteName[i].checked){
arrUl[0].removeChild(arrDeleteName[i].parentNode);
i--; //这里注意要减一个
}
}
} </script>
</head> <body>
<input type="text"/>
<input type="button" value="增加留言">
<input type="button" value="批量删除">
<ul>
</ul>
</body>
</html>

js 实现简易留言板功能的更多相关文章

  1. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  2. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  3. JS原生编写实现留言板功能

    实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...

  4. 原生node实现简易留言板

    原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...

  5. JSP简易留言板

    写在前面 在上篇博文JSP内置对象中介绍JSP的9个内置对象的含义和常用方法,但都是比较理论的知识.今天为大家带来一个小应用,用application制作的简易留言板. 包括三个功能模块:留言提交.留 ...

  6. 使用PHP连接数据库实现留言板功能

    PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html>    <head>        <meta charset=&qu ...

  7. Flask学习之旅--简易留言板

    一.写在前面 正所谓“纸上得来终觉浅,方知此事要躬行”,在看文档和视频之余,我觉得还是要动手做点什么东西才能更好地学习吧,毕竟有些东西光看文档真的难以理解,于是就试着使用Flask框架做了一个简易留言 ...

  8. php实现简易留言板效果

    首先是Index页面效果图 index.php <?php header('content-type:text/html;charset=utf-8'); date_default_timezo ...

  9. jsp中运用application实现共享留言板功能

    jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...

随机推荐

  1. mongo的基本命令操作

    基本用法学习:https://www.runoob.com/mongodb/mongodb-create-database.html MongoDB数据库基本用法 show dbs:显示数据库列表 s ...

  2. Java编程风格节选

    3.3 import语句 3.3.1 import不要使用通配符 即,不要出现类似这样的import语句:import java.util.*; 3.3.2 不要换行 import语句不换行,列限制( ...

  3. 《JavaScript算法》常见排序算法思路与代码实现

    冒泡排序 通过相邻元素的比较和交换,使得每一趟循环都能找到未有序数组的最大值或最小值. 最好:O(n),只需要冒泡一次数组就有序了. 最坏: O(n²) 平均: O(n²) *单项冒泡 functio ...

  4. 2018年宜賓美酒文化節浮空投影舞美特效 / 2018 Yibing Wine Festival Visual Effect Projection

    客户 Client:五粮液集团 硬件 Hardware:PC,巴可投影机30,000流明*2  Barco projector 30,000 lumen*2 软件 Software:Resolume, ...

  5. 修改 MyEclipse 编辑区域背景颜色

  6. Chrome 调试 react-native 通过Network面板查看网络请求

    参考 https://github.com/facebook/react-native/issues/934 三楼 真机或模拟器下 Debug JS Remotely, 会打开chrome,地址为ip ...

  7. 猫头鹰的深夜翻译:核心JAVA并发一

    简介 从创建以来,JAVA就支持核心的并发概念如线程和锁.这篇文章会帮助从事多线程编程的JAVA开发人员理解核心的并发概念以及如何使用它们. (博主将在其中加上自己的理解以及自己想出的例子作为补充) ...

  8. Redis过期key淘汰策略

    Redis采用惰性+定期的key淘汰策略 1. Redis配置项hz定义了serverCron任务的执行周期,默认为10,即CPU空闲时每秒执行10次; 2. 每次过期key清理的时间不超过CPU时间 ...

  9. android编译架构之添加C项目

    1.  增加一个项目与android编译中枢息息相关.特别需要告诉编译中枢的一些特别信息. 例如: A 这个项目target名字是什么 B 这个项目编译类型是什么,bin?c?lib?or jar? ...

  10. yii框架通过控制台命令创建定时任务

    假设Yii项目路径为 /home/apps 1. 创建文件 /home/apps/web/protected/commands/console.php $yii = '/home/apps/frame ...