<!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. 深入JVM内核--JVM运行机制

    JVM启动流程 JVM基本结构 PC寄存器 每个线程拥有一个PC寄存器 在线程创建时 创建 指向下一条指令的地址 执行本地方法时,PC的值为undefined 方法区 保存装载的类信息 类型的常量池 ...

  2. [LC] 56. Merge Intervals

    Given a collection of intervals, merge all overlapping intervals. Example 1: Input: [[1,3],[2,6],[8, ...

  3. <JZOJ5904>刺客信条

    然鹅考场上打错某变量名导致30都没有 调了很久因为 没转换double 死亡 #include<cstdio> #include<algorithm> #include< ...

  4. less 的使用方法总结

    一. 安装和使用 LESS 1.1 安装 使用命令行安装 LESS npm install -g less 1.2 使用 less 有多种的使用方法,在这里我向大家介绍最常用的俩种方法. 第一种是直接 ...

  5. Memcached笔记——（一）安装&常规错误&监控

    08年的时候接触过Memcached,当时还对它的客户端产品嗤之以鼻,毕竟手工代码没有各种ORM原生XML配置方便.尽管如此,Memcached现在已经成了服务器架构里不可或缺的一部分! 相关链接: ...

  6. 吴裕雄--天生自然 PHP开发学习：本地PHPSTORM在线连接、编辑、上传文件到虚拟机，并在本地浏览器运行（前提是虚拟机与本机已桥连成功）

  7. 初识Machine Learning

    What is Machine Learning 定义 Arthur Samuel:Field of study that gives computers the ability to learn w ...

  8. Ubuntu14.04下GAMIT10.6的安装

    #安装步骤将ubuntu切换到root用户权限 1 $sudo -s ##安装必要软件 1 2 3 4 5 $ apt-get install gcc $ apt-get install gfortr ...

  9. iOS 客户端与服务端做时间同步

    需求 我们做客户端的时候,有时会需要对客户端与服务器的时间进行同步,比如抢购活动.倒计时等.这时我们要考虑如何准备地与服务器的时间进行同步,同时防止用户本地的时间有误差时导致的问题. 分析 描述 为了 ...

  10. IP不是万能药 为何有蜘蛛侠等大片的索尼要放弃电影

    ​ 为何有蜘蛛侠等大片的索尼要放弃电影"> 近年来,国内狂炒"IP"这一概念,比如动漫.网络文学.小说.游戏等,甚至围绕IP制造出内容矩阵.从一个IP延伸至多个领域 ...