<!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. REMODE解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 纯视觉的三维重建(不考虑用结构光的那一类)常用的有两大类方法:一类是SfM,缺点是计算量比较大,做不到实时运行:另一类是KinectFusion为 ...

  2. 吴裕雄--天生自然Android开发学习：Android studio 3.5安装详解

    3. 建立AVD(安卓虚拟设备) 点击右上角AVD Manager图标,单击按钮Create Virtual Device,选择Nexus 5X,下一步,选择版本9.0,Download,然后Next ...

  3. Pycharm 2019 破解激活方法

    转载:https://blog.csdn.net/guofang110/article/details/87793264 使用破解补丁方法虽然麻烦,但是可用激活到2099年,基本上是永久激活了,毕竟在 ...

  4. HDU-1403-Longest Common Substring（后缀数组的高度数组运用）

    这题要求两个串中的最长相同子串的长度.高度数组可以求一个串中的最长相同子串的长度.所以想到把两个串连起来,但是这样又会产生一些新的串(第一个串的结尾和第二个串的开头组成的)于是在两个串中间放一个'\0 ...

  5. 实现api开发实例页面

    主要实现功能: 1.通过点击不同的option选项,自动生成不同的代码. 功能分析: 1.点击不同的option选项,这里其实就是使用了一个事件即onchange,把这个事件放在<select& ...

  6. firefox上网慢

    由于Chromium浏览器,打字的时候经常会跳字母,所以就换了firefox浏览器,但是FF上网的时候特别慢,而且大部分时间是花费在解析域名上.因此到网上找了许多资料,最终解决方法如下. 1.安装dn ...

  7. 吴裕雄--天生自然python学习笔记：Python3 迭代器与生成器

    迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退 ...

  8. python中sorted和sorted 、reversed和reverse的使用。

    #encoding = utf-8 list = [1,8,3,6] print(list.sort()) #None print(list) #[1,3,6,8] print(sorted(list ...

  9. ACID原则

    ACID原则是数据库事务正常执行的四个,分别指原子性.一致性.独立性及持久性. 事务的原子性(Atomicity)是指一个事务要么全部执行,要么不执行.也就是说一个事务不可能只执行了一半就停止了.比如 ...

  10. 导致提前layout的常见情况（通过chrome浏览器自带的控制台可以看到）

    1.通过js获取DOM属性 2.增/删/DOM节点 3.改变浏览器窗口大小 4.改变字体 5.激活css伪类 6.修改DOM的属性,涉及到大小.位置等(该颜色不会激活提前的layout) 7.其他js ...