javascript实现留言功能
原理：
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实现留言功能的更多相关文章
- 我的第一个jsp程序-实现注册登录留言功能
1,注册功能,包括两个页面 zhuce.jsp注册页面 <%@ page language="java" contentType="text/html; chars ...
- 用 JS + LeanCloud 给网页添加数据库（留言功能）
记录给自己网页添加留言功能的过程. 使用工具:LeanCloud,一个自带数据库和增删改查(CRUD)功能的后台系统. 1 在JS中引入LeanCloud官方库 在LeanCloud注册并添加应用的步 ...
- javascript 自动填充功能
javascript 自动填充功能 javascript: (function(){ $("#zipcode").val("zip");$("#pho ...
- javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...
- javascript 页面导出功能
javascript 页面导出功能 <a class="btn" href="javascript:void(0);" onclick="win ...
- JavaScript ES6 核心功能一览（转）
原文地址:Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) 原文作者:Adrian Mejia 译文出自:掘金翻 ...
- Javascript中暂停功能的实现
<script language="javascript"> /*Javascript中暂停功能的实现 Javascript本身没有暂停功能(sleep不能使用)同时 ...
- 微信小程序 「柒留言」 — 实现微信公众号留言功能（限时免费入驻，建议收藏）
「柒留言」小程序留言助手使用指南(接近原生界面) 前言 从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
随机推荐
- How to install Redis 3.2 on CentOS 6 and 7
What is Redis? Redis is a flexible open-source, key value data store, used as a database, cache and ...
- binlog开启和查看
1. 首先需要将mysql的binlog日志打开.默认是关闭的. 参考网址:Windows下Mysql5.7开启binlog步骤及注意事项(https://www.cnblogs.com/wangwu ...
- 如何查看虚拟机的ip地址，以及如何给虚拟机配置静态ip
1 在命令行上敲ifconfig 如下图: 通过inet addr : 192.168.25.129就是你的虚拟机当前的ip 2. 我们一般在局域网内是通过dhcp协议向网关发送ip请求,因此获取的i ...
- oracle数据库升级dbua操作阻塞解决方法(解决ORA-32004报错)
操作环境 1.SuSE11sp3操作系统 2.oracle 11.2.0.3版本升级到11.2.0.4版本 问题现象 oracle 11.2.0.3版本升级到11.2.0.4版本时执行dbua命令 ...
- 遍历DOM树，获取父节点
通过获取父节点,还可以获取父节点的父节点. 有3个常用方法: 方法 说明 parent() 选取父节点 parents() 选取所有父节点 parentsUntil("div&q ...
- 检查浏览器是否已经启用Java支持功能
<script type="text/javascript"> document.write("navigator对象的方法"+"< ...
- T-SQL行合并成列与列拆分成行
本文出处:http://www.cnblogs.com/wy123/p/6910468.html 感觉最近sql也没少写,突然有一点生疏了,对于用的不是太频繁的一些操作,时间一久就容易生. 多行的某一 ...
- Nginx深度优化
简介 1.隐藏版本号2.修改Nginx用户与组3.配置Nginx网页缓存时间4.实现Nginx的日志切割5.配置Nginx实现连接超时6.更改进程数7.配置Nginx实现网页压缩功能8.配置Nginx ...
- MySQL内连接，左（外）连接，右（外）连接
用两个表(a_table.b_table),关联字段a_table.a_id和b_table.b_id来演示一下MySQL的内连接.外连接( 左(外)连接.右(外)连接.全(外)连接). MySQL版 ...
- hdu1042-N!-（java大数）
题目:求n!(0<=n<=10000) import java.math.BigInteger;//操作大整数 import java.math.BigDecimal;//操作大小数 im ...