原理：

1.用户在留言框输入留言

2.利用textarea的value属性获取到用户输入的留言

3.动态创建一个li

4.将获取的留言打包成html存到li中

5.根据需要添加删除留言、统计留言数量等功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简单的留言板</title>

    <style type = "text/css">

        *{

            padding:0;

            margin:0;

        }

        textarea {

            width:320px;

            height:80px;

            background:whitesmoke;

            font-size:16px;

        }

        span:hover {

            cursor:pointer;

        }

    </style>

</head>

<body>

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

    <div id = "box">

        <!--通过js实现根据用户的输入动态创建一个存放用户留言的li，并且允许用户删除留言-->

    </div>

    <label>

        <textarea id = "msg" rows = "5" cols = "42"></textarea>

    </label>

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

    <button id = "calc" onclick = calc()>统计</button>

</body>

    <script type = "text/javascript">

        var box = document.getElementById("box");

        var ul = document.createElement("ul");

        box.appendChild(ul);

        var btn = document.getElementById("btn");

        var msg = document.getElementById("msg");

        var n = 0;

        btn.onclick = function(){

            if(msg.value === ""){

                alert("请输入内容")

            } else{

                n++;

                var li = document.createElement("li");

                li.innerHTML = msg.value + "  "+"<span>X</span>";

                var lis = document.getElementsByTagName("li");

                if(n === 1){

                    ul.appendChild(li);

//                    如果是第一条留言则用appendChild

                }else{

                    ul.insertBefore(li,lis[0]);

//                    最新的留言总在第一条显示

                }

                msg.value = "";

//                重置文本框

                var span = document.getElementsByTagName("span");

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

                    span[i].onclick = function(){

                        ul.removeChild(this.parentNode);

                        n--;

                    }

                }

            }

        };

        function calc(){

            alert("一共有"+n+"条留言")

        }

    </script>

</html>

javascript实现留言功能的更多相关文章

  1. 我的第一个jsp程序-实现注册登录留言功能

    1,注册功能,包括两个页面 zhuce.jsp注册页面 <%@ page language="java" contentType="text/html; chars ...

  2. 用 JS + LeanCloud 给网页添加数据库（留言功能）

    记录给自己网页添加留言功能的过程. 使用工具:LeanCloud,一个自带数据库和增删改查(CRUD)功能的后台系统. 1 在JS中引入LeanCloud官方库 在LeanCloud注册并添加应用的步 ...

  3. javascript 自动填充功能

    javascript 自动填充功能 javascript: (function(){ $("#zipcode").val("zip");$("#pho ...

  4. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  5. javascript 页面导出功能

    javascript 页面导出功能 <a class="btn" href="javascript:void(0);" onclick="win ...

  6. JavaScript ES6 核心功能一览（转）

    原文地址:Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) 原文作者:Adrian Mejia 译文出自:掘金翻 ...

  7. Javascript中暂停功能的实现

    <script language="javascript"> /*Javascript中暂停功能的实现 Javascript本身没有暂停功能(sleep不能使用)同时 ...

  8. 微信小程序 「柒留言」 — 实现微信公众号留言功能（限时免费入驻，建议收藏）

    「柒留言」小程序留言助手使用指南(接近原生界面) 前言 从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...

  9. Javascript自定义事件功能与用法实例分析

    原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...

随机推荐

  1. 浅谈transient关键字

    1,用途 当一个对象实现了Serilizable接口,这个对象就可以被序列化.而有时候我们可能要求:当对象被序列化时(写入字节序列到目标文件)时,有些属性需要序列化,而其他属性不需要被序列化,打个比方 ...

  2. Zabbix3.0版报警设置

    各项报警历史记录查看:“报表--Action log” ------------------------------------------------------------------------ ...

  3. Centos7升级新内核

    由于觉得Centos7内核版本还不够高,就想升级下,下面是升级步骤 我使用的方法是使用yum升级内核 使用第三方仓库升级 CentOS 允许使用 ELRepo,这是一个第三方仓库,可以将内核升级到最新 ...

  4. [PHP]PHP页面静态化：真静态的两种方案

    ---------------------------------------------------------------------------------------------- /*|-- ...

  5. 中文转码器的工作原理_delphi教程

    最近在做Delphi下的简体与繁体转换, 发现Windows2000自带的工具"中文转码器"很好用, 不仅可以转内码(BIG5-->GBK), 还可以将繁体字转为简体字(如: ...

  6. 18.3 redis 的安装

    因为之前我们server不存东西 我们 发现 后打开的网页 是接手不到之前的变化,不能更新到最新的变化的. 我们需要做到server给client发最新的代码已达到同步 我们有三种做法同步到最新的代码 ...

  7. C# windows服务：如何检测指定的Windows服务是否启动

    public void CheckServerState(string ServiceName) { ServiceController[] service = ServiceController.G ...

  8. MySQL C#连接ySQL保存当前时间，时分秒都是0，只有日期

    原因:MySQL的字段格式是:date 解决: 1.把 字段格式 改为 datetime 2.映射 的字段类型 也要改为 datetime

  9. 使用Python抓取猫眼近10万条评论并分析

    <一出好戏>讲述人性,使用Python抓取猫眼近10万条评论并分析,一起揭秘“这出好戏”到底如何? 黄渤首次导演的电影<一出好戏>自8月10日在全国上映,至今已有10天,其主演 ...

  10. 局部变量and全局变量

    局部变量 <1>什么是局部变量 如下图所示: <2>小总结 局部变量,就是在函数内部定义的变量 不同的函数,可以定义相同的名字的局部变量,但是各用个的不会产生影响 局部变量的作 ...