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 纤维…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
三维GIS开发cesium智慧地铁教程（5）Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...