<!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. Linux Ubuntu 默认root密码

    Ubuntu 默认root密码是随机的,每次开机都会有一个新的root密码 第一步: 输入命令:sudo passwd

  2. jenkins使用（2）-配置项目代码的3种方式

    1.通过cmd命令直接进入项目代码的文件夹运行,注意路径中不要有中文 2.代码放到工作区:从本地复制项目代码到工作区目录下 代码结构的优化 3.代码连接git或svn,实时更新代码 svn检出 然后上 ...

  3. python的IO

    格式化输出 格式化输出是指通过print()等函数向指定的地方(比如屏幕)输出指定格式的内容 格式: age = 18 name = "xiaohua" print("我 ...

  4. js中对Object对象的一些常用操作总结

    前言我前面的文章,写过js中“类”与继承的一些文章.ES5我们可以通过 构造函数 或者 Object.create()等方式来模拟出js中的“类”,当然,对象呢是类的实例化,我们可以通过如下方式创建对 ...

  5. Spring Security基本原理

    近期研究了Spring Security,现进行记录. 首先先进行一个最简单的demo.默认情况下,在Spring Boot里,如果在classpath下面有Spring Security相关的jar ...

  6. 阿里云ECS 实例Centos7系统磁盘扩容

    需求:一台阿里云的数据盘磁盘空间不足,需要扩容,我这里只有一个主分区,ext4文件系统. 因为磁盘扩容场景不同,阿里云的文档比较全面一些,所以先奉上阿里云的文档,下面开始我的操作步骤: 1.登录控制台 ...

  7. 阿里云服务器上搭建seafile专业版

    因为官方一键安装教程在阿里云服务器上无法安装,由于水平有限,无法解决,所以选择手动安装 参考资料: 1,.腾讯云搭建seafile服务器 2.How to Install Seafile with N ...

  8. e代驾狂野裁员 O2O逐渐恢复理智？

    O2O逐渐恢复理智?" title="e代驾狂野裁员 O2O逐渐恢复理智?">     近段时间以来,O2O行业堪称"哀鸿遍野",十分凄惨.巨头 ...

  9. Spring Boot 学习1-创建Spring Boot应用

    如果使用Maven, 确保先安装好Maven再继续. 创建POM文件 在这里有两种方式: 继承Spring Boot parent的pom. 不继承. 继承Spring Boot pom 1 2 3 ...

  10. 时尚起义开源话题微博系统 v.0.4.5 上传漏洞

    漏洞出现在/action/upload.php文件中 <?php /** ** **By QINIAO **/ !defined('QINIAO_ROOT') && exit(' ...