<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>留言板</title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            .close{

                display: inline-block;

                width: 20px;

                height: 20px;

                line-height: 20px;

                text-align: center;

                cursor: pointer;

                background-color: rgba(0,0,0,.1);

                margin-left: 20px;

            }

        </style>

    </head>

    <body>

        <h1>简易留言板</h1>

        <div id="box">

            <!--<ul>

            </ul>-->

        </div>

        <textarea id="msg"></textarea>

        <input type="button" id="btn" value="留言"/>

        <button onclick="sum()">统计</button>

    </body>

    <script type="text/javascript">

        // 0 将ul标签添加到div#box标签中

        var oUl = document.createElement('ul');

        var oBox = document.getElementById('box');

        oBox.appendChild(oUl);

        var oBtn = document.getElementById('btn');

        var oMsg = document.getElementById('msg')

        // 控制留言的总数量

        var count = 0;

        oBtn.onclick = function(){

            // 点击留言按钮事件操作

            // 1.创建li标签

            var oLi = document.createElement('li');

            //2.设置内容

            oLi.innerHTML = oMsg.value + "<span class='close'>X</span>"

            // 3.如果想在插入的第一个li获取的前面继续添加li标签

            //3.1获取li标签

            var olis = document.getElementsByTagName('li');

             //3.2 如果是第一次添加的li标签，则直接添加到ul的后面

            if(olis.length == 0){

                oUl.appendChild(oLi);

                count++;

            }else{

                // 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面

                oUl.insertBefore(oLi,olis[0]);

                count++;

            }

            // 4.添加完成之后 清空textarea的值

            oMsg.value = '';

            // 5.点击X的时候删除当前的一条数据

            //5.1先获取所有的X

            var oSpans = document.getElementsByTagName('span');

            // 5.2for循环 对所有的X添加点击事件

            for(var i = 0; i< oSpans.length; i++){

                oSpans[i].onclick  = function(){

                    // 5.3 移除当前的li标签

                    oUl.removeChild(this.parentNode)

                    count--;

                }

            }

        }

        function sum(){

            alert('一共发布了'+count+'条留言');

        }

    </script>

</html>

JavaScript 实现留言框的更多相关文章

  1. javascript实现留言功能

    原理: 1.用户在留言框输入留言 2.利用textarea的value属性获取到用户输入的留言 3.动态创建一个li 4.将获取的留言打包成html存到li中 5.根据需要添加删除留言.统计留言数量等 ...

  2. javascript当文本框获得焦点设置边框

    javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通 ...

  3. JavaScript插件——模态框

    Bootstrap3.0学习第十七轮(JavaScript插件——模态框)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  4. 练习：javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. cookie的简单留言框

    我们在网页浏览时退出后,再次进入时会有上次的记录,这就用的上cookie属性了,cookie就是服务器暂存放在你计算机上的一笔资料,好让服务器用来辨认你的计算机.当你在浏览网站的时候,Web服务器会先 ...

  6. Bootstrap3.0学习教程十七：JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

  7. [Selenium] 使用Javascript选中Input框里的内容，然后清空

    当我们需要清空Input框里的内容,直接使用el.clear()方法又行不通时,可以使用Javascript先去选中内容,然后再使用el.clear()方法:

  8. JavaScript下拉框去除重复内容

    下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...

  9. JavaScript实现弹框

    提起JS弹框,我首先想到的是Alert,然后想到的还是Alert,最后我竟然就只知道Alert.然后面试就死在这个Alert上了.恼火. 根据网上各位大神的总结,我整理了一下,也顺便学习了一下. 一. ...

随机推荐

  1. 01.Python基础-4.字符串

    1 字符串初识 字符串编码 字符串定义:多个字符(双引号或单引号中的数据)组成 字符串下标 类似列表list 格式化 就是占位符 最常用%s %d %f等等 转义字符 转义字符 描述 \ (在行尾时) ...

  2. C++学习笔记（转）

    http://www.cnblogs.com/maowang1991/p/3290321.html 以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读 ...

  3. 06005_Jedis入门

    1.Jedis介绍 (1)Redis不仅是使用命令来操作.现在基本上主流的语言都有客户端支持,比如Java.C.C#.C++.PHP.Node.js.Go等: (2)在官方网站里列有一些Java的客户 ...

  4. CF449 C. Jzzhu and Apples

    /* http://codeforces.com/problemset/problem/449/C cf 449 C. Jzzhu and Apples 数论+素数+贪心 */ #include &l ...

  5. Forge.autodesk平台的使用

    看了下面的这个网址的教程,发现其中的curl在git集成的shell中不好用,反复尝试后发现,&后面是没有空格的,记录下 https://forge.autodesk.io/

  6. BA-Delta知识点

    问题: DSM-RTR的网络负载能力是怎样的?每条总线带32个模块吗?MS/TP总线上的模块需要拨地址码吗?最大可以承载多少个点? 答:理论值是30,最佳性能是21个,一般情况25-28个 linkn ...

  7. 简单易学的机器学习算法——神经网络之BP神经网络

    一.BP神经网络的概念     BP神经网络是一种多层的前馈神经网络,其基本的特点是:信号是前向传播的,而误差是反向传播的.详细来说.对于例如以下的仅仅含一个隐层的神经网络模型: watermark/ ...

  8. JavaScript 获取小数任一小数点后的位数的小数

    用Javascript取float型小数点后两位,例22.127456取成22.13,怎样做? 1.这样的方法最不推荐: function get(){ var s = 22.127456 + &qu ...

  9. android帧动画,移动位置,缩放,改变透明度等动画解说

    1.苦逼的需求又来了,须要实现一些动画效果,第一个想到的是播放gif图片,可是这样会占包的资源,而且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享 ...

  10. iOS 8使用Touch ID进行身份认证

    iOS 8的SDK开放了Touch ID的接口.从WWDC的视频中能够看到Touch ID应用在两个方面:用于Key Chain加密和用于授权.iOS 8正式版公布以后我们能够看到Evernote的i ...