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 纤维…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）
前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块，…...