js+css+html制作简易留言板
1 案例说明
利用JavaScript、css以及html制作简易留言板，也可以看作是简易评论区。
要求在页面文本框中输入一些文字之后，点击“发布”按钮，就可以让输入的文字显示在下面，重新输入一些文字，再点击发布，就可以让新发布的内容显示在最上面。点击后面的删除，就可以删除已经发布的文字。
【案例分析】利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。
2 编写HTML代码
在HTML页面中的元素比较简单，需要一个标签，用来输入留言，一个标签，用来发表留言，以及一个
标签，用来显示留言的内容。
<textarea>
textarea> <button>发布
button> <ul>
ul> 
3 编写css代码
CSS代码主要对留言板的样式进行一些设置。首先让页面中的外边距和内边距都为0，让留言板靠中心移动一些。
* {
margin: 0; padding: 0; } body {
padding: 100px; } 
接着设置输入框的属性，设置宽高、边框颜色，轮廓样式以及是否可以改变大小。轮廓就是当聚焦时出现的黑色的边框。
textarea {
width: 200px; height: 100px; border: 1px pink solid; /* 不设置轮廓 */ outline: none; /* 设置其不能改变长宽 */ resize: none; } 设置评论li的样式。这部分设置到现在是看不出效果的，因为目前还没有评论，需要在设置完JavaScript之后搭配动态效果才可以。设置评论的宽度，内边距，背景色，字体大小，外边距，为了让评论更加的好看。
li {
width: 300px; padding: 5px; background-color: #eee; font-size: 15px; margin: 15px 0; } 设置删除的样式。删除使用a标签来设置，将其向右浮动。
li a {
float: right; } 4 编写JavaScript代码
在JavaScript部分中，需要为按钮绑定事件。当点击按钮时，如果文本框内没有文字，则弹出提示；如果有文字，则将该文字添加到下方的ul的li中，因此这个过程中需要添加li，并且添加a标签作删除功能，点击删除时删除该li元素。
//1、获取元素 var txt = document.querySelector("textarea"); var btn = document.querySelector("button"); var ul = document.querySelector("ul"); //2、给button绑定点击事件 btn.onclick = function () {
if (txt.value == "") {
//当文本框中没有文字时，提示 alert("您没有输入内容") } else {
//创建元素li作为留言区 var li = document.createElement("li"); //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行 li.innerHTML = txt.value + "删除" txt.value = "";//添加之后文本框的内容清空 //将留言添加到ul中，而且在最上方 ul.insertBefore(li, ul.children[0]); //当点击删除时删除ul中的li var as = document.querySelectorAll("a"); //循环给每个删除绑定事件 for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//删除当前a标签所在位置的父节点li ul.removeChild(this.parentNode); } } } } 5 全部代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
title>
head> <style> * {
margin: 0; padding: 0; } body {
padding: 100px; } textarea {
width: 200px; height: 100px; border: 1px pink solid; /* 不设置轮廓 */ outline: none; /* 设置其不能改变长宽 */ resize: none; } li {
width: 300px; padding: 5px; background-color: #eee; font-size: 15px; margin: 15px 0; } li a {
float: right; }
style> <body> <textarea>
textarea> <button>发布
button> <ul>
ul> <script> //1、获取元素 var txt = document.querySelector("textarea"); var btn = document.querySelector("button"); var ul = document.querySelector("ul"); //2、给button绑定点击事件 btn.onclick = function () {
if (txt.value == "") {
//当文本框中没有文字时，提示 alert("您没有输入内容") } else {
//创建元素li作为留言区 var li = document.createElement("li"); //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行 li.innerHTML = txt.value + "删除" txt.value = "";//添加之后文本框的内容清空 //将留言添加到ul中，而且在最上方 ul.insertBefore(li, ul.children[0]); //当点击删除时删除ul中的li var as = document.querySelectorAll("a"); //循环给每个删除绑定事件 for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//删除当前a标签所在位置的父节点li ul.removeChild(this.parentNode); } } } }
script>
body>
html> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/222131.html原文链接：https://javaforall.net
