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 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
javascript代码实现简易计算器
Jan 25 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
php实现网站插件机制的方法
2009/11/10 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
JS中的phototype详解
2017/02/04 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
浅谈五大Python Web框架
2017/03/20 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Sanic框架配置操作分析
2018/07/17 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
项目管理计划书
2014/01/09 职场文书
考察现实表现材料
2014/05/19 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
北京导游词
2015/02/12 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL