<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

        *{margin: 0;padding: 0;}

        .div{width: 500px; min-height: 300px; border: 1px solid red; margin: auto; margin-top: 200px;}

        .div .lyb{width: 90%; margin: auto; display: block; border-bottom: 1px solid red; padding: 5px 0px;}

        .div .div1{width: 90%; border: 1px solid red; margin: 5px auto;}

        .div .div1 p{width: 100%; padding: 5px 0px; height: 30px; line-height: 30px; }

        .div .div1 ul{width: 100%;}

        .div .div1 ul li{width: 100%; height: 30px; padding: 5px 0px; line-height: 30px; list-style: none;margin-bottom: 10px; background: blanchedalmond;}

        #wbk{resize: none; width: 90%;margin: auto; height: 100px; display: block;}

        #btn{width: 90%; height: 100px; margin: auto; display: block; margin-top: 5px;}

        a{float: right}

        span{float: right;}

    </style>

</head>

<body>

    <div class="div">

        <p class="lyb">留言板</p>

        <div class="div1">

            <p class="p">请输入内容</p>

            <ul>

            </ul>

        </div>

        <textarea id="wbk"></textarea>

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

    </div>

    <script>

        var p = document.getElementsByClassName("p")[0];

        var ul = document.getElementsByTagName("ul")[0];

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

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

        var num = 0;

        btn.onclick = function(){

            if(wbk.value.length != 0){

                p.style.display = "none";

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

                var em = document.createElement('em');

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

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

                li.innerHTML = wbk.value;

                li.insertBefore(em,li.firstChild);

                a.innerHTML = "点击删除";

                a.setAttribute("href","javascript:void(0)");

                li.appendChild(a);

                span.innerHTML = "第" + num + "个";

                li.appendChild(span);

                wbk.value = "";

                ul.appendChild(li);

                fn1();

                fn2();

            }else{

                alert("请输入内容")

            }

        }

        function fn1(){

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

            var ee = document.getElementsByTagName('em');

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

                ee[i].innerHTML = i + 1 + ".";

            }

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

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

                ss[i].innerHTML = "第" + (i + 1) + "个";

            }

            if(ali.length == 0){

                p.style.display = "block";

            }

        }

        function fn2(){

            var aa = document.getElementsByTagName("a");

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

                aa[i].onclick = function(){

                    this.parentNode.parentNode.removeChild(this.parentNode);

                    fn1();

                }

            }

        }

    </script>

</body>

</html>

Document

留言板

请输入内容

html留言功能的更多相关文章

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

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

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

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

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

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

  4. FastAPI（七十）实战开发《在线课程学习系统》接口开发--留言功能开发

    在之前的文章:FastAPI(六十九)实战开发<在线课程学习系统>接口开发--修改密码,这次分享留言功能开发 我们能梳理下对应的逻辑 1.校验用户是否登录 2.校验留言的用户是否存在 3. ...

  5. Node.js 博客实例（六）留言功能

    原教程https://github.com/nswbmw/N-blog/wiki/_pages的第六章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 实现用户给文章留言的功能,留言保存在数据 ...

  6. javascript实现留言功能

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

  7. php实现留言功能

    php真的挺好玩的! 先写出前台页面index.php: <!DOCTYPE html> <html lang="en"> <head> < ...

  8. wordpress如何批量关闭旧日志留言功能

    于一些wordpress技术博客或者其他wordpress博客来说,一些旧日志的内容可能已经过时了,但是一些读者,还是对一些问题“纠缠不清”或者“喋喋不休”,怎么办,把留言关了就好了: UPDATE ...

  9. JS小练习 留言功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 浅谈《think in java》：二 一切都是对象

    清晨坐在图书馆,今天聊聊早晨的“果实”. 清单1. 引用操作:对象创建:存储地方:基本类型:数组 “reference”:引用[操作对象的标识符] 例子:创建String类型的引用,并不是对象. St ...

  2. java web路径和spring读取配置文件

    此篇博客缘起:部署java web系统到阿里云服务器(ubuntu14.04)的时候,有以下两个问题 找不到自定义的property配置文件 上传图片的时候找不到路径 开发的时候是在windows上的 ...

  3. 开发-封闭原则(OCP)

    1.什么是“开放-封闭” 随着软件系统规模的不断增大,软件系统的维护和修改的复杂性不断提高,这种困境促使法国工程院士Bertrand Meyer在1998年提出了“开放-封闭”(Open-Close ...

  4. PHP中的__call和__callStatic方法

    如何防止调用不存在的方法而出错,使用__call魔术重载方法. __call方法原型如下: mixed __call(string $name,array $arguments) 当调用一个不可访问的 ...

  5. Ubuntu apt-get和pip国内源更换

    Ubuntu apt-get和pip源更换 更新数据源为国内,是为了加速安装包的增加速度. 更换apt-get数据源 输入:sudo -s切换为root超级管理员: 执行命令:vim /etc/apt ...

  6. Go 标准库 http.FileServer 实现静态文件服务

    http.FileServer 方法属于标准库 net/http,返回一个使用 FileSystem 接口 root 提供文件访问服务的 HTTP 处理器.可以方便的实现静态文件服务器. http.L ...

  7. YARN集群的mapreduce测试（四）

    将手机用户使用流量的数据进行分组,排序: 测试准备: 首先同步时间,然后master先开启hdfs集群,再开启yarn集群:用jps查看: master上: 先有NameNode.SecondaryN ...

  8. Shuffle过程

    Shuffle过程 在MapReduce框架中,shuffle是连接Map和Reduce之间的桥梁,Map的输出要用到Reduce中必须经过shuffle这个环节,shuffle的性能高低直接影响了整 ...

  9. [转]用C#在windows上操控电脑自带蓝牙（入道指南）

    本文转自:https://blog.csdn.net/YSSJZ960427031/article/details/50990372 前言如题,如果你也想用C#在windows上操控电脑自带蓝牙,但是 ...

  10. EF Codefirst 中间表（关系表）的增删改查（转）

    EF Codefirst 多对多关系 操作中间表的 增删改查(CRUD)   前言 此文章只是为了给新手程序员,和经验不多的程序员,在学习ef和lambada表达式的过程中可能遇到的问题. 本次使用订 ...