网站首页 > web开发 > JavaScript 正文
目录
1.案例说明：
利用JavaScript、css以及html制作一个简易的留言板
要求在页面文本框中输入一些文字之后，点击“提交”按钮，就可以让输入的文字和当前留言时间显示在下面，重新输入一些文字，再点击提交，就可以让新发布的内容显示在最上面。点击后面的删除，就可以删除已经提交后的留言。
【案例分析】利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“提交”按钮动态创建一个li元素，添加到ul里面。
2.html部分
主要有一个文本框，一个提交按钮，和一个展示留言部分的ul列表。
3.css部分
* {
margin: 0;
padding: 0;
}
#mgs {
width: 400px;
color: black;
font-style: italic;
border-width: 5px;
margin: 0 auto;
}
#text {
width: 400px;
height: 150px;
padding: 20px;
font-size: 20px;
}
li {
list-style: none;
border-bottom: 1px solid #999;
line-height: 20px;
margin-top: 30px;
}
span {
float: right;
}清除默认样式，设置文本框的样式（字体黑色，斜体，在浏览器中居中，字体大小，内边距），去除默认列表的样式，span主要是用来包当前留言时间的。
4.js代码
获取按钮元素，获取ul列表元素，获取文本框元素
var btn = document.getElementById('btn');
var list = document.querySelector('.list');
var text = document.getElementById('text');绑定按钮点击事件：
当文本框没有输入内容的时候，点击提交浏览器提示“你没有输入内容”，
btn.onclick = function () {
if (text.value == '') {
alert('你没有输入内容。')
} else {当输入内容后，创建一个li元素节点，在li.li.innerHTML里面输入文本框内容和当前时间和一个删除按钮，将li添加到ul中，并将文本框内已输入的内容清除。
var li = document.createElement('li');
li.innerHTML = text.value + '' + mytime + '\t' + '删除'
text.value = '';
list.insertBefore(li, list.children[0]);获取当前输入内容的时间
var time = new Date(); var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate(); li.innerHTML = text.value + '' + mytime + '\t' + '删除';
给删除按钮绑定点击删除事件。获取所有的button按钮，点击button按钮时，删除li（删除button按钮的父节点的父节点）
var allB = document.querySelectorAll('button');
for (var i = 0; i < allB.length; i++) {
allB[i].onclick = function () {
list.removeChild(this.parentNode.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;
}
#mgs {
width: 400px;
color: black;
font-style: italic;
border-width: 5px;
margin: 0 auto;
}
#text {
width: 400px;
height: 150px;
padding: 20px;
font-size: 20px;
}
li {
list-style: none;
border-bottom: 1px solid #999;
line-height: 20px;
margin-top: 30px;
}
span {
float: right;
}
</style>
<body>
<div id="mgs">
<textarea id="text"></textarea><br>
<input type="button" id="btn" value="提交">
<ul class="list"></ul>
</div>
<script>
var btn = document.getElementById('btn');
var list = document.querySelector('.list');
var text = document.getElementById('text');
btn.onclick = function () {
if (text.value == '') {
alert('你没有输入内容。')
} else {
var li = document.createElement('li');
var time = new Date();
var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>';
text.value = '';
list.insertBefore(li, list.children[0]);
var allB = document.querySelectorAll('button');
for (var i = 0; i < allB.length; i++) {
allB[i].onclick = function () {
list.removeChild(this.parentNode.parentNode);
}
}
}
}
</script>
</body>
</html>6.效果图：
没有输入内容时：
输入内容，并按提交按钮
按下删除按钮
总结
到此这篇关于JavaScript实现留言板的文章就介绍到这了,更多相关JS实现留言板内容请搜索开源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开源网！
猜你喜欢
- 2023-10-14 js获取url参数值的几种方式详解
- 2023-10-12 JS中数组合并的几种常见方法
- 2023-10-11 JavaScript 如何删除小数点后的数字
- 2023-10-10 vue 导入js中的两种方法(示例详解)
- 2023-10-10 JS 将字符串中指定字符全局替换的方法
- 2023-10-10 JS实现深拷贝的4种方式介绍
- 2023-10-09 js类型判断内部实现原理示例详解
- 2023-10-08 js 中的柯里化与反柯里化的基础概念和用法
- 2023-10-08 js控制台报错Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild‘)的解决
- 2023-10-08 js中find、findIndex、indexOf的用法和区别
欢迎 你 发表评论:
- 12-06如何自定义Excel2003散点图的数据标志
- 12-06excel2007的sheet不见了怎么办
- 12-06Excel2010中进行设置取消密码的操作方法
- 12-06excel怎样使用IMSUM函数
- 12-06EXCEL快速输入数据
- 12-06excel中设置次要坐标轴的教程
- 12-06excel2003冻结窗格的教程
- 12-06Excel如何输入上标下标
- 开源分类
- 最近发表
- 开源网标签
鲁公网安备 37010202002546号
本文暂时没有评论，来添加一个吧(●'◡'●)