javascript实现简单留言板案例


Posted in Javascript onFebruary 09, 2021

用Javascript实现留言板案例(附带删除留言),供大家参考,具体内容如下

正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教

在一些网站的讨论品论区,我们通常可以看见会有留言板这个功能,然后当用户评论时,空评论不能评论,发布的评论将会最新显示,把旧的评论抵下去,然后博主可以对评论进行删除

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 body {
 padding: 100px;
 }

 textarea {
 width: 200px;
 height: 100px;
 border: 1px solid pink;
 outline: none;
 resize: none;
 }

 ul {
 margin-top: 50px;
 }

 li {
 list-style: none;
 width: 300px;
 padding: 5px;
 background-color: rgb(245, 209, 243);
 color: red;
 font-size: 14px;
 margin: 15px 0;
 }

 li a {
 float: right;
 text-decoration: none;
 }
 </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>

</ul>
<script>
 var btn=document.querySelector('button')
 var textarea=document.querySelector('textarea')
 var ul=document.querySelector('ul')
 btn.onclick=function () {
 if (textarea.value==''){
 alert('宁没有输入内容')
 return false
 }else{
 var li=document.createElement('li')
 li.innerHTML=textarea.value+"<a href='javascript:;'>删除</a>"
 ul.insertBefore(li,ul.children[0])
 var as=document.querySelectorAll('a')
 for (var i=0;i<as.length;i++){
 as[i].onclick=function () {
  ul.removeChild(this.parentNode)
 }
 }
 }
 }
</script>
</body>
</html>

效果展示

空评论时:

javascript实现简单留言板案例

新的评论会把旧评论抵下去:

javascript实现简单留言板案例

删除时:

javascript实现简单留言板案例

代码解释

这里就是当按钮点击事件触发时,获取文本域里面的内容,触发函数,先进行判断,判断文本域的值是否为空,如果是,那么弹出警示框,并且不将文本的内容显示在下面。

如果文本框有内容,那么,创建一个元素li,用li来接收'.然后将li里面的文本内容设置为文本域的1内容+a标签(删除功能)。

然后就是设置新添加的li用于显示在前面,就是insertbefore。然后就是循环绑定a标签,实现点哪个a标签,哪一行就删除。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JS模板实现方法
Apr 03 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
学习vue.js计算属性
Dec 03 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
vue实现购物车列表
Jun 30 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
javascript实现下拉菜单效果
Feb 09 #Javascript
用javascript实现倒计时效果
Feb 09 #Javascript
javascript实现倒计时关闭广告
Feb 09 #Javascript
javascript实现固定侧边栏
Feb 09 #Javascript
JavaScript实现前端倒计时效果
Feb 09 #Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 #Javascript
You might like
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
python实现数组插入新元素的方法
2015/05/22 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python实现中文文本分句的例子
2019/07/15 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
HEMA法国:荷兰原创设计
2019/02/21 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
经典安踏广告词
2014/03/21 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
经验交流材料格式
2014/12/30 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
小学大队长竞选稿
2015/11/20 职场文书
导游词之无锡古运河
2019/11/14 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS
数据设计之权限的实现
2022/08/05 MySQL