js 实现简易留言板功能
<!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 实现简易留言板功能的更多相关文章
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- JS原生编写实现留言板功能
实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...
- 原生node实现简易留言板
原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...
- JSP简易留言板
写在前面 在上篇博文JSP内置对象中介绍JSP的9个内置对象的含义和常用方法,但都是比较理论的知识.今天为大家带来一个小应用,用application制作的简易留言板. 包括三个功能模块:留言提交.留 ...
- 使用PHP连接数据库实现留言板功能
PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html> <head> <meta charset=&qu ...
- Flask学习之旅--简易留言板
一.写在前面 正所谓“纸上得来终觉浅,方知此事要躬行”,在看文档和视频之余,我觉得还是要动手做点什么东西才能更好地学习吧,毕竟有些东西光看文档真的难以理解,于是就试着使用Flask框架做了一个简易留言 ...
- php实现简易留言板效果
首先是Index页面效果图 index.php <?php header('content-type:text/html;charset=utf-8'); date_default_timezo ...
- jsp中运用application实现共享留言板功能
jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...
随机推荐
- spring:事务的5大隔离级别,7大传播行为
一.五大隔离级别 ISOLATION_READ_UNCOMMITTED:读未提交 ISOLATION_READ_COMMITTED:读已提交 ISOLATION_REPEATABLE_READ:可重复 ...
- stack|session|fuss|anniversary
N-COUNT A stack of things is a pile of them. 摞; 堆 例: There were stacks of books on the bedside table ...
- HTTP 协议的基本知识,包括请求流程、请求方法等
一.什么是http协议? HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和Int ...
- python基础实现简单的shell sed 替换功能
#coding:utf-8 from pygame.draw import lines import sys,os old_file = sys.argv[1] #接受外部设备上的参数 new_fil ...
- 安装python3.5
安装python3.5可能使用的依赖 [root@heweiwei heweiwei]# yum install openssl-devel bzip2-devel expat-devel gdbm- ...
- js 四舍五入实现
js Number.prototype.toFixed 进行的舍入的算法没研究明白,应该不是四舍六入五成双,当然也不是四舍五入 下面是chrome与excel的对比 修改完之后的结果 对于“问题数据” ...
- Java 多线程(上)
启动一个多线程 多线程即在同一时间,可以做多件事情,创建多线程有3种方式,分别是继承线程类,实现Runnable接口,匿名类 线程概念 首先要理解进程(Processor)和线程(Thread)的区别 ...
- How to Write a README on GitHub
最近在寫 GitHub 上的 README,發現這個東西好像每個人的寫法都不太一樣,於是稍微整理了一下自己覺得大概要包含哪些內容. Motivation 顧名思義就是簡介一下為什麼會有這個專案,以及這 ...
- c#或者C#.net中的“ToolTip”是“System.Windows.Forms.ToolTip”和“DevComponents.DotNetBar.ToolTip”之间的不明确的引用
“ToolTip”是“System.Windows.Forms.ToolTip”和“DevComponents.DotNetBar.ToolTip”之间的不明确的引用 ,在编程时,有时候会编译出现不明 ...
- 你有哪些相见恨晚的Chrome 扩展?
「Chrome 没插件,香味少一半」,本期我们就来一起盘点一下chrome上那些相见恨晚的扩展. 1 JSONView2 Adblock Plus3 Keylines4 彩云小译5 单词发现者6 鼠标 ...