<!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. deeplearning.ai 人工智能行业大师访谈

    Geoffrey Hinton 1. 怀揣着对大脑如何存储记忆的好奇,Hinton本科最开始学习生物学和物理学,然后放弃,转而学习哲学:然后觉得哲学也不靠谱,转而学习心理学:然后觉得心理学在解释大脑运 ...

  2. Docker 安装 CentOS

    Docker 安装 CentOS CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise ...

  3. 《hdu 免费馅饼》

    题目描述 免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  4. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  5. SpringMVC基本使用步骤

    使用Spring MVC,第一步就是使用Spring提供的前置控制器,即Servlet的实现类DispatcherServlet拦截url:org.springframework.web.servle ...

  6. A Knight's Journey （DFS）

    题目: Background The knight is getting bored of seeing the same black and white squares again and agai ...

  7. Archlinux 自动挂载移动硬盘，开机自动启动smb服务

    Archlinux + Raspberry 打造NAS: samba篇 树莓派自动挂载硬盘,并开启smb服务. 开机自动挂在移动硬盘ntfs 安装ntfs-3g sudo pacman -S ntfs ...

  8. C++扬帆远航——4（百钱百鸡）

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:baiji.cpp * 作者:常轩 * 完成日期:2016年3月 ...

  9. Centos 7 使用Securecrt 配置Public key 登录

    环境:Centos 7 SecureCRT 版本:8.0.4 需求:配置使用Public key 登录服务器禁用密码登录 1. 配置使用SecureCRT,生成Public key 跟私钥 2. 配置 ...

  10. Golang/Python/PHP带你彻底学会gRPC

    目录 一.gRPC是什么? 二.Protocol Buffers是什么? 三.需求:开发健身房服务 四.最佳实践 Golang 1. 安装protoc工具 2. 安装protoc-gen-go 3. ...