简易留言板HTML+JS代码

之前做的一个简易的留言板，也发上来。直接看代码就行。

没有用特别复杂的，直接用的DOM2的事件代理。数据也是直接在js这边渲染生成，我的代码里面的注释都算是比较详细的，直接看就可以的。

<!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>留言板</title>
</head>
<style>article {border: 3px solid rgb(195, 2, 2);width: 800px;margin: 0 auto;padding-bottom: 50px;}p {display: flex;justify-content: space-between;border-bottom: 2px dotted rgb(79, 205, 233);margin: 0;}p:nth-child(1) {border-top: 2px dotted rgb(79, 205, 233);}p:nth-child(2) {padding-bottom: 40px;border-bottom: 0;}input[type="button"] {margin-left: 10px;}
</style><body><article><section></section><!-- 增加一个多行输入文本框 --><textarea name="" id="" cols="30" rows="10"></textarea><input type="button" value="留言"></article><script src="./liu.js"></script>
</body></html>

//获取节点
let artEle = document.querySelector("article");
let secEle = document.getElementsByTagName("section")[0];//创建数组
let arr = [{ name: "小张", time: "2020-01-01", content: "今天星期五，明天星期六！" },{ name: "小磊", time: "2020-02-01", content: "中秋节快乐！" },{ name: "小海", time: "2020-03-01", content: "明天不上课！爽翻！！！" },{ name: "小丽", time: "2020-04-01", content: "今晚做个好梦哦~" },
]//将数据渲染到页面上
function render() {let str = "";arr.forEach((item, index) => {str += `<div><p><span>${item.name}</span><span>${item.time}</span></p><p><span>${item.content}</span><span data-index="${index}">删除</span></p></div>`;});secEle.innerHTML = str;
}//给祖先元素article绑定一个事件监听器（事件代理）
artEle.addEventListener("click", function (e) {let index = e.target.dataset.index - 0;if (e.target.value == "留言") {let textAreaEle = document.getElementsByTagName("textarea")[0];//获取本地时间let date = new Date();let localTime = date.toLocaleString();//年月日、时分秒同时获取//将原本的/ 换成-//replace该方法主要用于将字符串中符合匹配条件的字串替换成其他的字符串，//返回替换后的字符串，且原字符串不变。let gang = localTime.replace(/\//g, "-");//将用户输入的内容容作为对象存进数组arr.push({ name: "小明", time: gang, content: textAreaEle.value })//清空输入框，方便下次输入textAreaEle.value = "";//再次渲染render();}if (e.target.innerHTML == "删除") {arr.splice(index, 1);render();}
})
render();

简易留言板HTML+JS代码相关推荐

html简单留言板教程,JS实现简易留言板（节点操作）
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下今天的案例主要是对节点进行操作创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留 ...
android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明利用JavaScript.css以及html ...
JavaWeb简易留言板 servlet+ajax+mysql
使用servlet+ajax将数据存入数据库实现简易留言板先上图~~ 加载界面同时加载历史留言发表留言字数超出限制禁用按钮发表留言成功~ 下面贴代码 message_board.html &l ...
java 留言板源码_jsp+servlet+javabean实现简易留言板（包含数据库文件）
[实例简介] jsp+servlet+javabean实现简易留言板(包含数据库文件) 简单体验MVC设计模式 jsp:视图,与用户打交道:servlet:控制器,请求分配转发,联系视图层与模型层:j ...
javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分效果预览 html部分 <textarea name="text" cols="3 ...
vue生命周期，组件，slot替换，tab切换，简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
[练习]简易留言板制作
[练习]简易留言板制作
php简易留言板功能,php实现简易留言板效果
首先是Index页面效果图 index.php date_default_timezone_set('PRC');$filename="msg.txt";$msgs=[];//检测 ...
JS实现简易留言板功能
一.分析 1.留言板功能 ①发布评论 ②删除评论 2.发布功能 ①发布评论前判断评论框(用textarea输入评论)是否为空 ②点击发布按钮,发布评论(用li展示评论,开始评论为空,html部分< ...

简易留言板HTML+JS代码

简易留言板HTML+JS代码相关推荐

最新文章

热门文章