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 delete 使用示例代码
Mar 29 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python如何发送与接收大型数组
2020/08/07 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
运动会拉拉队口号
2014/06/09 职场文书
创建文明城市倡议书
2015/04/28 职场文书
Pandas自定义选项option设置
2021/07/25 Python