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对象,即所有访问该网站 ...
随机推荐
- cashier|gasoline|reservoir
N-COUNT 出纳(员);收银员A cashier is a person who customers pay money to or get money from in places such a ...
- 德国、日本的制造业为什么不能完全执行SOP?
在过去几十年,德国.日本的制造企业简直就是"以质取胜"的代名词,一些制造业的CEO非常自豪,甚至在公开场合调侃:大家好,我就是"保质保量"本人,也正因如此,德国 ...
- [洛谷P4782] [模板] 2-SAT 问题
NOIp后第一篇题解. NOIp我考的很凉啊...... 题目传送门 之前讲过怎么判断2-SAT是否存在解. 至于如何构造一组解: 我们想到对tarjan缩点后的图进行拓扑排序. 那么对于代表0状态的 ...
- Allure介绍
以下内容基于pytest的框架进行展示: 什么是Allure Allure是一个独立的报告插件,生成美观易读的报告,目前支持语言:Java, PHP, Ruby, Python, Scala, C#. ...
- LG_2051_[AHOI2009]中国象棋
题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...
- Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题
本文为原创文章,转载请标明出处 目录 使用 videogular2 安装 增加图标.字体支持 导入 module 举个例子 遇到的问题 iOS 端自动进入全屏播放 Android 端 autoplay ...
- 谁来破解公交WiFi的尴尬困局?
在咖啡馆.饭店坐定,菜单可以待会再看,远远看见服务员迎上来,赶紧先问一句:"这里有无线网吗,密码是多少",和笔者一样养成类似习惯的人越来越多.所以,当公交WiFi"大 ...
- 批量修改datafram中某一列
如要对df中列名为“values”的值做修改,大于等于50改为1,小于50改为0,可用apply函数来实现: def fun(x): if x >= 50: return 1 else: ret ...
- SQL JOIN 和 UNION 用法
1 SELECT Persons.LastName, Persons.FirstName, Orders.OrderNo FROM Persons, Orders WHERE Persons.Id_P ...
- github hexo配置踩过的坑
大体步骤:配置npm,在github中增加自己的sshkey. 多sshkey的话在用户主目录的.ssh中要配置好. 删除仓库里面 source/_posts/我的文章.md 执行下面命令更新博客 h ...