<!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. python2查找匹配数据及类型转换

    判断一个字符是否包含在另一个字符串中,如果包含,但是数据类型不同,需要进行数据类型转换 下面这个是针对python2

  2. sqlserver开窗函数改造样例

    作一个查询的性能优化. 先清缓存 DBCC DROPCLEANBUFFERS DBCC FREEPROCCACHE 原查询 前人遗留. ) ),) select @total=sum(price*pe ...

  3. SHELL用法九（awk练习）

    1.SHELL编程Awk语句案例实战 Awk主要是用于对文本文件进行处理,通常是逐行处理,其语法参数格式为, AWK常用参数.变量.函数详解如下: awk 'pattern + {action}' f ...

  4. django Field选项中null和blank的区别

    blank只是在填写表单的时候可以为空,而在数据库上存储的是一个空字符串:null是在数据库上表现NULL,而不是一个空字符串: 需要注意的是,日期型(DateField.TimeField.Date ...

  5. DjangoModels

    传智博客的python的笔记 数据库配置 ORM简介 MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换 ...

  6. 传统if 从句子——以条件表达式作为if条件

    传统if 从句子——以条件表达式作为 if条件if [ 条件表达式 ]then command command commandelse command commandfi   条件表达式 文件表达式 ...

  7. PyCharm 介绍、安装、入门使用

    一.Pycharm介绍 前面几年的时间,我一直用的eclipse,后面开始听同事说用IntelliJ IDEA了,而且说是目前业界最好用的java开发工具,IDE(集成开发环境),没有之一.PyCha ...

  8. AI在自动化测试领域的应用

    阿里QA导读:最近一两年随着深入学习技术浪潮的诞生,智能化测试迎来了新的发展,而AI也会引领下一代测试的新航向.Testin云测CTO陈冠诚先生的分享让我们看到AI在移动自动化测试领域里面的创新机会点 ...

  9. 阿里云Confluence无法发送邮件修复

    阿里云屏蔽外网的25端口,防止发送垃圾邮件,所以导致阿里云上的ecs无法发送邮箱 采用腾讯邮箱,端口25和465都试了好几遍,最终改成587即可 参考https://blog.csdn.net/qq_ ...

  10. coreseek 在gcc 4.9+ 上编译不通过 [sphinxexpr.o] Error 1 错误解决方案

    这几天玩hhvm,把gcc环境都装到4.9了,然后编译coreseek的时候就出问题,google一大圈,貌似捕风捉影看到一些信息说是gcc4.7+的c++作用域必须用this->去引用,这里整 ...