<!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. Vc数据库编程基础MySql数据库的表增删改查数据

    Vc数据库编程基础MySql数据库的表增删改查数据 一丶表操作命令 1.查看表中所有数据 select * from 表名 2.为表中所有的字段添加数据 insert into 表名( 字段1,字段2 ...

  2. spring学习(二) ———— AOP之AspectJ框架的使用

    前面讲解了spring的特性之一,IOC(控制反转),因为有了IOC,所以我们都不需要自己new对象了,想要什么,spring就给什么.而今天要学习spring的第二个重点,AOP.一篇讲解不完,所以 ...

  3. 【Go】获取用户真实的ip地址

    原文链接:https://blog.thinkeridea.com/201903/go/get_client_ip.html 用户请求到达提供服务的服务器中间有很多的环节,导致服务获取用户真实的 ip ...

  4. lua语言初探

    写在最前面 <cocos2d-x lua核心编程>是我首次购买电子书,坑的就不谈了,书里的代码部分基本上不是少空格就是多换行,让阅读变得十分困难. 所以又购买了实体书,加上看一些大佬视频和 ...

  5. 结构型---代理模式(Proxy Pattern)

    代理模式的详细介绍 代理模式按照使用目的可以分为以下几种: 远程(Remote)代理:为一个位于不同的地址空间的对象提供一个局域代表对象.这个不同的地址空间可以是本电脑中,也可以在另一台电脑中.最典型 ...

  6. spring boot 使用第三方jar的方法

    2018/02/02 更新 mvnrepository.com已经提供了ms jdbc 的jar URL: http://mvnrepository.com/artifact/com.microsof ...

  7. 《Office 365开发入门指南教程》正式上线,限时优惠和邀请分享推广

    我很高兴地通知大家,<Office 365 开发入门指南教程>已经正式在网易云课堂上线,你可以通过直接访问  https://aka.ms/office365devlesson 这个短地址 ...

  8. [android] smartimageview&常见的开源代码

    github上搜索开源框架android-smarty-imageview,下载压缩包,拷贝我们之前写的网络图片查看器布局. 解压下载包里面的数据,找到java源码拷贝到我们的项目里,这时我们可以看到 ...

  9. 【Tomcat】Tomcat的类加载机制

    在Tomcat中主要有以下几种类加载器:(图片来自网络) tomcat启动时,会创建几种类加载器: 1 Bootstrap 引导类加载器 加载JVM启动所需的类,以及标准扩展类,位于jre/lib/e ...

  10. 【转】消除代码中的 if-else/switch-case

    在很多时候,我们代码中会有很多分支,而且分支下面的代码又有一些复杂的逻辑,相信很多人都喜欢用 if-else/switch-case 去实现.做的不好的会直接把实现的代码放在 if-else/swit ...