仿B站超简陋评论模块(留言+删除)

2023-10-21 12:50

本文主要是介绍仿B站超简陋评论模块(留言+删除),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

运行结果截图

 

CSS样式

  <style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.comment-send {margin: 100px auto;width: 1200px;}.user-face {position: absolute;width: 65px;height: 65px;}.user-face img {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;vertical-align: middle;border-radius: 50%;}.textarea-container {position: relative;width: 638px;height: 65px;margin-bottom: 10px;}.textarea-container textarea {position: relative;display: inline-block;margin-left: 75px;outline: none;resize: none;font-family: sans-serif;font-size: 12px;color: #555;padding: 5px 10px;width: 470px;height: 65px;background-color: #f4f5f7;border: 1px solid #e5e9ef;cursor: text;text-indent: 2px;}.textarea-container button {display: inline-block;width: 70px;height: 65px;position: absolute;right: 15px;top: 0px;padding: 4px 15px;font-size: 14px;color: #fff;border-radius: 4px;text-align: center;vertical-align: top;cursor: pointer;background-color: #00a1d6;border: 1px solid #00a1d6;transition: 0.1s;}.comment-list ul {margin-left: 75px;}.comment-list li {border: 1px solid #ccc;width: 300px;padding: 5px;background-color: #f4f5f7;padding: 2px 0;font-size: 14px;text-shadow: none;padding: 5px;margin-bottom: 5px;}.comment-list li a {float: right;}</style>

 HTML结构

<body><div class="comment-send"><div class="user-face"><img src="images/ldh.jpg" alt=""></div><div class="textarea-container"><textarea cols="80" rows="5" placeholder="发一条友善的评论" name="" id=""></textarea><button>发布评论</button></div><div class="comment-list"><ul></ul></div></div></body>

JavaScript代码

<script>var textarea_container = document.querySelector('.textarea-container');var textarea = textarea_container.querySelector('textarea');var btn = textarea_container.querySelector('button');var comment_list = document.querySelector('.comment-list');var ul = comment_list.querySelector('ul');btn.onclick = function () {if (textarea.value == '') {alert('请输入内容');}else {//(1) 生成元素var li = document.createElement('li');//(2) 添加元素和删除链接 javascript:;防止链接跳转li.innerHTML = textarea.value + "<a href = 'javascript:;'>删除</a>";// ul.appendChild(li); 最新评论在下面ul.insertBefore(li, ul.children[0]); //最新评论在最上面//(3) 删除元素li.children[0].onclick = function () {ul.removeChild(this.parentNode);}}}</script>

这篇关于仿B站超简陋评论模块(留言+删除)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/254521

相关文章

MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

《MySQLInnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据》mysql的ibdata文件被误删、被恶意修改,没有从库和备份数据的情况下的数据恢复,不能保证数据库所有表数据... 参考:mysql Innodb表空间卸载、迁移、装载的使用方法注意!此方法只适用于innodb_fi

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

shell脚本自动删除30天以前的文件(最新推荐)

《shell脚本自动删除30天以前的文件(最新推荐)》该文章介绍了如何使用Shell脚本自动删除指定目录下30天以前的文件,并通过crontab设置定时任务,此外,还提供了如何使用Shell脚本删除E... 目录shell脚本自动删除30天以前的文件linux按照日期定时删除elasticsearch索引s

docker如何删除悬空镜像

《docker如何删除悬空镜像》文章介绍了如何使用Docker命令删除悬空镜像,以提高服务器空间利用率,通过使用dockerimage命令结合filter和awk工具,可以过滤出没有Tag的镜像,并将... 目录docChina编程ker删除悬空镜像前言悬空镜像docker官方提供的方式自定义方式总结docker

Python利用自带模块实现屏幕像素高效操作

《Python利用自带模块实现屏幕像素高效操作》这篇文章主要为大家详细介绍了Python如何利用自带模块实现屏幕像素高效操作,文中的示例代码讲解详,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、获取屏幕放缩比例2、获取屏幕指定坐标处像素颜色3、一个简单的使用案例4、总结1、获取屏幕放缩比例from

使用Python在Excel中插入、修改、提取和删除超链接

《使用Python在Excel中插入、修改、提取和删除超链接》超链接是Excel中的常用功能,通过点击超链接可以快速跳转到外部网站、本地文件或工作表中的特定单元格,有效提升数据访问的效率和用户体验,这... 目录引言使用工具python在Excel中插入超链接Python修改Excel中的超链接Python

nginx-rtmp-module模块实现视频点播的示例代码

《nginx-rtmp-module模块实现视频点播的示例代码》本文主要介绍了nginx-rtmp-module模块实现视频点播,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习... 目录预置条件Nginx点播基本配置点播远程文件指定多个播放位置参考预置条件配置点播服务器 192.

Android kotlin语言实现删除文件的解决方案

《Androidkotlin语言实现删除文件的解决方案》:本文主要介绍Androidkotlin语言实现删除文件的解决方案,在项目开发过程中,尤其是需要跨平台协作的项目,那么删除用户指定的文件的... 目录一、前言二、适用环境三、模板内容1.权限申请2.Activity中的模板一、前言在项目开发过程中,尤

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用