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 UI CSS Framework开发Widget的经验
Aug 21 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
详谈javascript异步编程
Feb 21 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
viewer.js实现图片预览功能
Jun 24 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操作SVN版本服务器类代码
2011/11/27 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
回调函数的意义以及python实现实例
2017/06/20 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
详解python播放音频的三种方法
2019/09/23 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python连接PostgreSQL过程解析
2020/02/09 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Django视图类型总结
2021/02/17 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
先进教师事迹材料
2014/12/16 职场文书
2014年医务科工作总结
2014/12/18 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android