JS实现简易留言板功能

一、分析

1.留言板功能

①发布评论

②删除评论

2.发布功能

①发布评论前判断评论框（用textarea输入评论）是否为空

②点击发布按钮，发布评论（用li展示评论，开始评论为空，html部分<ul></ul>，通过JS部分创建li元素），把文本框的内容赋给li

③后发布的评论在前面的评论上边（指定元素添加insertBefore）

3.删除功能

①获取文本域时在后面添加删除链接

②删除功能不需要链接跳转，所以要阻止<a></a>跳转（<a href='javascript:;'></a>）

③删除时，点击删除，删除的是删除链接所在的父标签（整条评论都要删除）

二、代码

html部分

<textarea cols="30" rows="10"></textarea><button>发送</button><ul></ul>

css部分

<style>button {background-color: orange;color: white;border-radius: 20px;}li {width: 300px;height: 25px;list-style: none;background-color: #ccc;margin: 10px;}a {float: right;text-decoration: none;}</style>

js部分

<script>//获取元素var btn = document.querySelector("button");//var text = btn.previousElementSibling;(另一种获取textarea的写法)var text = document.querySelector("textarea");var ul = document.querySelector("ul");btn.onclick = function() {if(text.value == "") {alert("发布的评论不能为空");}else {//创建 li 元素var li = document.createElement("li");//发布评论li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";ul.insertBefore(li,ul.children[0]);var as = document.querySelector("a");as.onclick = function() {//ul.removeChild(this.parentNode);(另一种删除li的方法)ul.removeChild(li);}}}</script>

三、结果

四、总结

非常小白的留言板功能实现，主要实现功能在于获取文本域文字添加到第一个和删除。在学习到更多知识以后，还会更加精进功能。

JS实现简易留言板功能相关推荐

android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
html简单留言板教程,JS实现简易留言板（节点操作）
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下今天的案例主要是对节点进行操作创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留 ...
php简易留言板功能,PHP实现简单留言板功能的方法
这篇文章主要为大家详细介绍了PHP简单留言板功能的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下具体内容如下: index.php error_reporting(0); //关闭NOT ...
php简易留言板功能,简单实现PHP留言板功能
这篇文章主要介绍了简单实现PHP留言板功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这篇文章主要教大家如何简单实现PHP留言板功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一 ...
php简易留言板功能,php实现简易留言板效果
首先是Index页面效果图 index.php date_default_timezone_set('PRC');$filename="msg.txt";$msgs=[];//检测 ...
php简易留言板功能,php简单的留言板与回复功能具体实现
php简单的留言板与回复功能具体实现留言板是在刚接触php时用来学习的一个简单的应用例子了,今天我再给初学php的朋友提供一个完整的php留言板的全部制作过程,希望对你会有帮助在网上找了这方面的教 ...
html简易留言,JS实现简易留言板特效
本文实例为大家分享了JS实现留言板特效的具体代码,供大家参考,具体内容如下知识点 1.textarea 大段输入框 2.value获取输入框的值 3.innerHTML所用东西:innerText文 ...
js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明利用JavaScript.css以及html ...
留言板代码 php js,原生JS实现留言板功能
本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. window.onload = functi ...