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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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&amp;mysql(四)
2006/10/09 PHP
杏林同学录(六)
2006/10/09 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python实现dijkstra最短路由算法
2019/01/17 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
大学秋游活动方案
2014/02/11 职场文书
护理学专业求职信
2014/06/29 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
主婚人致辞精选
2015/07/28 职场文书