HTML+CSS+JavaScript：实现B站评论发布效果
一、需求
1、用户输入内容，输入框左下角实时显示输入字数
2、为避免用户输入时在内容左右两端误按多余的空格，在发送评论时，检测用户输入的内容左右两端是否带有空格，若有空格，发布时自动取消左右两端的空格
3、若用户发布的内容为空，则自动取消该条评论的发送，并弹出提示框：请勿发送空白评论！
4、当页面中已经填装多条评论时，发送的新评论自动追加到最末尾
5、 发布的评论最下方显示发布时间
二、代码素材
以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评论回车发布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;/* 不允许超出大盒子 */background: url(./images/avatar.jpg) no-repeat center / cover;/* 大部分情况下，图片样式都是这样设置的 */margin-right: 20px;}/* outline：outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不一定是矩形。*//* transition：设置过度属性与.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}配合使用，表示光标在文本域中时，所有样式（属性值all）在2s内向border-color:#e4e4e4;background: #fff;height: 50px;平滑过渡*/.wrapper textarea {outline: none;/* 这行代码可省略 */border-color: transparent;/* 边框颜色为透明 */resize: none;/* 用户无法自行调元素的尺寸，常用于文本域 */background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;/* 这行代码与下面.wrapper textarea:focus的那几行代码配合，可以让相关样式在获取焦点事件的时候平滑过渡 */transition: all 0.5s;height: 30px;}/*用法类似于 选择器:hover */.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;/* opacity设置透明度，0是完全透明，1是完全不透明opacity从0变成1时，元素会平滑显现*/transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;line-height: 2em;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i> <!-- 需用可在一行排列且可设置宽高的行内块元素 --><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><!-- <div class="item"><i class="avatar"></i><div class="info"><p class="name">早八睡不醒午觉睡不够的程序员</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div> --></div><script></script></body></html>三、完整代码
因为今天这个案例的算法思路实在不方便直接用语言描述，所以我就直接放代码了
不过我在代码上添加了详细的注释，大家结合代码和注释一定能够理解的
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评论回车发布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;/* 不允许超出大盒子 */background: url(./images/avatar.jpg) no-repeat center / cover;/* 大部分情况下，图片样式都是这样设置的 */margin-right: 20px;}/* outline：outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不一定是矩形。*//* transition：设置过度属性与.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}配合使用，表示光标在文本域中时，所有样式（属性值all）在2s内向border-color:#e4e4e4;background: #fff;height: 50px;平滑过渡*/.wrapper textarea {outline: none;/* 这行代码可省略 */border-color: transparent;/* 边框颜色为透明 */resize: none;/* 用户无法自行调元素的尺寸，常用于文本域 */background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;/* 这行代码与下面.wrapper textarea:focus的那几行代码配合，可以让相关样式在获取焦点事件的时候平滑过渡 */transition: all 0.5s;height: 30px;}/*用法类似于 选择器:hover */.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;/* opacity设置透明度，0是完全透明，1是完全不透明opacity从0变成1时，元素会平滑显现*/transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;line-height: 2em;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i> <!-- 需用可在一行排列且可设置宽高的行内块元素 --><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><!-- <div class="item"><i class="avatar"></i><div class="info"><p class="name">早八睡不醒午觉睡不够的程序员</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div> --></div><script>//获取元素const tx = document.querySelector('#tx')const button = document.querySelector('.wrapper button')const text = document.querySelector('.text')const time = document.querySelector('.time')const list = document.querySelector('.list')const total = document.querySelector('.total')//函数功能：发布评论function fabu() {//检测用户输入的内容左右两端是否带有空格，若有空格，发布时自动取消左右两端的空格//若用户发布的内容为空，则自动取消该条评论的发送，并弹出提示框：请勿发送空白评论！if (tx.value.trim() === '') {tx.value = ''total.innerHTML = '0/200字'alert('请勿发送空白评论！')return}//创建新的元素节点const div = document.createElement('div')//修改元素节点的内容div.className = 'item'div.innerHTML = `<i class="avatar"></i><div class="info"><p class="name">早八睡不醒午觉睡不够的程序员</p><p class="text">${tx.value}</p><p class="time">${new Date().toLocaleString()}</p></div>`//清空用户输入的内容tx.value = ''total.innerHTML = `${tx.value.length}/200字`//将用户输入的内容追加到评论区里list.append(div)}//鼠标点击发布，调用发布函数button.addEventListener('click', () => {fabu()})// 键盘按下Enter，调用发布函数tx.addEventListener('keyup', e => {if (e.key === 'Enter') fabu()})//输入框获得焦点，左下角自动显示字数tx.addEventListener('focus', function () {total.style.opacity = 1})//输入框失去焦点，左下角字数显示自动消失tx.addEventListener('blur', function () {total.style.opacity = 0})//用户输入时，实时显示输入字数tx.addEventListener('input', () => {total.innerHTML = `${tx.value.length}/200字`})</script></body></html>相关文章：
HTML+CSS+JavaScript：实现B站评论发布效果
一、需求 1、用户输入内容，输入框左下角实时显示输入字数 2、为避免用户输入时在内容左右两端误按多余的空格，在发送评论时，检测用户输入的内容左右两端是否带有空格，若有空格，发布时自动取消左右两端的空格 3、若用…...
实战 - 利用 ThreadLocal 线程局部变量实现数据缓存
文章目录 1. 利用 ThreadLocal 缓存 AssetBranchCache 数据1. 定义 AssetBranchCache 类2. 定义 BranchContext 类操作 AssetBranchCache 对象3. 配置拦截器实时更新和清除缓存数据4. 定义 SaasThreadContextDataHolderBranch 类持有 AssetBranchCache 对象5. 定义 SaasThreadC…...
wxwidgets Ribbon使用简单实例
// RibbonSample.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include <wx/wx.h> #include "wx/wxprec.h" #include "wx/app.h" #include "wx/frame.h" #include "wx/textctrl.h" #include "…...
2023年第四届“华数杯”数学建模思路 - 案例：最短时间生产计划安排
文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 0 赛题思路 （赛题出来以后第一时间在CSDN分享） 最短时间生产计划模型 该模型出现在好几个竞赛赛题上&#x…...
LeetCode404. 左叶子之和
404. 左叶子之和 文章目录 [404. 左叶子之和](https://leetcode.cn/problems/sum-of-left-leaves/)一、题目二、题解方法一：递归方法二：迭代 一、题目 给定二叉树的根节点 root ，返回所有左叶子之和。 示例 1： 输入: root [3,9…...
Nginx 高性能内存池 ----【学习笔记】
跟着这篇文章学习： c代码实现一个高性能内存池（超详细版本）_c 内存池库_linux大本营的博客-CSDN博客https://blog.csdn.net/qq_40989769/article/details/130874660以及这个视频学习： nginx的内存池_哔哩哔哩_bilibilihttps://w…...
iOS--frame和bounds
坐标系 首先，我们来看一下iOS特有的坐标系，在iOS坐标系中以左上角为坐标原点，往右为X正方向，往下是Y正方向如下图： bounds和frame都是属于CGRect类型的结构体，系统的定义如下，包含一个CGPoint…...
docker logs 使用说明
docker logs 可以查看某个容器内的日志情况。 前置参数说明 c_name容器名称 / 容器ID logs 获取容器的日志 , 命令如下： docker logs [options] c_name option参数： -n 查看最近多少条记录：docker logs -n 5 c_name--tail与-n 一样 &#…...
Ceph入门到精通-Ceph PG状态详细介绍（全）
本文主要介绍PG的各个状态，以及ceph故障过程中PG状态的转变。 Placement Group States（PG状态） creating Ceph is still creating the placement group. Ceph 仍在创建PG。activating The placement group is peered but not yet active.…...
【数据结构】二叉树、二叉搜索树、平衡二叉树、红黑树、B树、B+树
概述 二叉树（Binary Tree）：每个节点最多有两个子节点（左子节点和右子节点），没有限制节点的顺序。特点是简单直观，易于实现，但查找效率较低。 二叉搜索树（Binary Search…...
【JVM】（二）深入理解Java类加载机制与双亲委派模型
文章目录 前言一、类加载过程1.1 加载（Loading）1.2 验证（Verification）1.3 准备（Preparation）1.4 解析（Resolution）1.5 初始化（Initialization） 二、双亲委派…...
npm i 报错项目启动不了解决方法
1.场景 在另一台电脑低版本node环境跑的react项目，换到另一台电脑node18环境执行npm i时候报错 2.解决方法 脚本前加上set NODE_OPTIONS--openssl-legacy-provider...
【从零开始学习JAVA | 第三十七篇】初识多线程
目录 前言： 编辑 引入： 多线程： 什么是多线程： 多线程的意义： 多线程的应用场景： 总结： 前言： 本章节我们将开始学习多线程，多线程是一个很重要的知识点ÿ…...
微信新功能，你都知道吗？
近日iOS 微信8.0.40正式版来了，一起来看看有哪些变化？ 1、朋友圈置顶 几个月前微信开始内测「朋友圈置顶」功能，从网友们的反馈来看，iOS 微信 8.0.40 似乎扩大了内测范围，更多用户可以体验到该功能了。 大家可以去自己…...
Android 中 app freezer 原理详解(二)：S 版本
基于版本：Android S 0. 前言 在之前的两篇博文《Android 中app内存回收优化(一)》和 《Android 中app内存回收优化(二)》中详细剖析了 Android 中 app 内存优化的流程。这个机制的管理通过 CachedAppOptimizer 类管理，为什么叫这个名字，而不…...
Vue3_04_ref 函数和 reactive 函数
ref 函数 声明变量时，赋值的值要写在 ref() 函数中修改变量时，变量名.value xxx在模板中使用时可以省略掉 .value，直接使用变量名即可 <template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><…...
05 Ubuntu下安装.deb安装包方式安装vscode，snap安装Jetbrains产品等常用软件
使用deb包安装类型 deb包指的其实就是debian系统，ubuntu系统是基于debian系统的发行版。 一般我们会到需要的软件官网下载deb安装包，然后你既可以采用使用“软件安装”打开的方法来进行安装，也可以使用命令行进行安装。我推荐后者ÿ…...
性能测试jmeter连接数据库jdbc（sql server举例）
一、下载第三方工具包驱动数据库 1. 因为JMeter本身没有提供链接数据库的功能，所以我们需要借助第三方的工具包来实现。 （有这个jar包之后，jmeter可以发起jdbc请求，没有这个jar包，也有jdbc取样器，但不能发起…...
8.3 C高级 Shell脚本
写一个脚本，包含以下内容： 显示/etc/group文件中第五行的内容创建目录/home/ubuntu/copy切换工作路径到此目录赋值/etc/shadow到此目录，并重命名为test将当前目录中test的所属用户改为root将test中其他用户的权限改为没有任何权限 #!/bin/b…...
2023年华数杯A题
A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性，在航天、军工、石化、建筑、交通等 高科技领域中有着广泛的应用。 目前，由单根隔热材料 A 纤维编织成的织物，其热导率可以直接测出；但是 单根隔热材料 A 纤维…...
【JavaEE】-- HTTP
1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...
云原生安全实战：API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...
【网络安全】开源系统getshell漏洞挖掘
审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。 单位，以个或者次数表示。 示例：…...