小控件——简单的留言评论删除模块

html

css

        <!-- 留言模块开始了 --><div class="comment w" id= 'five'><div class="headline">留言评论</div><div class="message"><textarea name="" id="" cols="30" rows="10"></textarea><input type="button" name="" id="btn" value='评论'><ul></ul></div></div>

/* 6.留言评论模块开始了 */
.comment {height: 500px;
}.message::before {content: '';display: block;position: absolute;z-index: -1;top:2583px;left:0;width: 100%;height: 500px;background: url(../images/pic4.jpg);background-size: cover;opacity: .4;
}.comment textarea {display: inline-block;margin:0px 20px 0;width: 60%;resize: none;outline: none;box-shadow: 4px 4px 5px rgba(128,128,128,0.4);
}#btn {border: 1px solid #ccc;box-shadow: 4px 4px 5px rgba(128,128,128,0.4);background-color: skyblue;
}.comment ul li {margin-left: 20px;width: 60%;margin-bottom: 5px;background-color: rgba(203, 153, 197,0.4);
}.comment ul li a {float: right;
}

js:

   // 6.评论模块var textarea = document.querySelector('textarea')var commentUl = document.querySelector('.comment ul')var btn = document.querySelector('#btn')btn.addEventListener('click', function () {var li = document.createElement('li')commentUl.insertBefore(li, commentUl.children[0])// 每次点击都要在后面追加内容，所以是+= ，如果是==就会清空之前的内容li.innerHTML += textarea.value + '<a href="javascript:;">删除</a>' + '<br>'textarea.value = ''alert('感谢您精彩的评论')// 代码是自上而下执行的，所以要注意事件发生的顺序var as = commentUl.querySelectorAll('a')// 删除留言for (var i = 0; i < as.length; i++) {as[i].addEventListener('click', function () {alert('您确定删除这条评论吗')commentUl.removeChild(this.parentNode)})}})

小控件——简单的留言评论删除模块相关推荐

如何在Android实现桌面清理内存简单Widget小控件
如何在Android实现桌面清理内存简单Widget小控件我们经常会看到类似于360.金山手机卫士一类的软件会带一个widget小控件,显示在桌面上,上面会显示现有内存大小,然后会带一个按键功能来一 ...
android组件开关按钮,简单聊聊“开关”这个小控件
开关虽然只是一个小控件,看起来很简单,但其实它的设计也有着大学问.本文和你一起探讨一下~ 一.开关是什么开关,英文Switch,常被翻译为开关.滑动开关.切换开关,作为界面中可直接操作的元件,提供两 ...
实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...
Android UI设计之十一自定义ViewGroup，打造通用的关闭键盘小控件ImeObser
2019独角兽企业重金招聘Python工程师标准>>> 转载请注明出处:http://blog.csdn.net/llew2011/article/details/51598682 ...
开发数字时钟桌面小控件
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) 所谓桌面小控件,就是指能直接显示在Android系统桌面的小程序,比如模拟时钟等.桌面小控件是通过Broadc ...
Android之RemoteViews篇上————通知栏和桌面小控件
Android之RemoteViews篇上----通知栏和桌面小控件一.目录文章目录 Android之RemoteViews篇上----通知栏和桌面小控件一.目录二.RemoteViews的概 ...
[Objective-c] IOS图片浏览小控件
最近空下来整理一下以前写的一些小控件,这是一个图片浏览的控件,使用Objective-c编写.项目是swift的朋友需要自己bridge一下. 一.功能介绍当用户点击图片进入图片浏览模式,控件会自动 ...
android桌面时钟小控件开发记录
所谓桌面小控件,就是能之间显示在Android系统桌面的小程序. 桌面小控件的实现是基于Broadcast的形式实现的,因此,每一个桌面小控件都对应于一个BroadcastReceiver类.Andr ...
iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇-Date Picker和UITool Bar控件简单介绍一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件有默认宽高,不用设置数据源和代理如何 ...

小控件——简单的留言评论删除模块

小控件——简单的留言评论删除模块相关推荐

最新文章

热门文章