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 纤维…...
网盘下载速度革命：如何用开源工具突破8大平台限速瓶颈
网盘下载速度革命：如何用开源工具突破8大平台限速瓶颈 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼…...
gh_mirrors/ad/advice项目社区支持体系：如何获得申请过程中的帮助与指导
gh_mirrors/ad/advice项目社区支持体系：如何获得申请过程中的帮助与指导 【免费下载链接】advice A repository of links with advice related to grad school applications, research, phd etc 项目地址: https://gitcode.com/gh_mirrors/ad/advice gh_mirr…...
win10 一键开启远程桌面 工具
Win10 一键开启远程桌面，无需第三方工具，用系统自带命令 / 脚本最安全、最快。一键批处理脚本、命令行、常用工具三种方案。 一、一键批处理脚本（推荐：双击即用） 新建文本文档，复制以下代码，保存…...
Qwen-Image-Layered效果展示：看AI如何生成可分层编辑的精美图片
Qwen-Image-Layered效果展示：看AI如何生成可分层编辑的精美图片 1. 引言 1.1 技术亮点 Qwen-Image-Layered 代表了图像生成技术的一次重要突破。与传统的单层图像生成不同，它能够将生成的图片自动分解为多个独立的RGBA图层，每个图层都包含…...
进阶提升！MySQL存储过程、触发器与视图实操指南
前三篇我们依次掌握了MySQL基础CRUD、进阶查询、事务、索引及数据备份，已经能满足日常开发和企业级基础数据操作需求。但在实际工作中，经常会遇到重复执行的SQL操作（如批量处理数据）、需要自动触发的业务逻辑（如数据插…...
别再死记硬背‘神经元’和‘激活函数’了！用乐高积木和流程图，5分钟搞懂神经网络核心思想
用乐高积木和侦探故事拆解神经网络：零公式理解AI如何思考 想象一下，你正在教一个五岁小孩搭建城堡——你不会掏出微积分课本，而是递给他一盒乐高积木。理解神经网络的核心思想也是如此，我们完全可以用积木块、水管阀门和侦探破案的…...
AI人工智能和数字孪生赋能智慧城市生命线数字化监测平台设计方案 ：五层分层解耦的数字孪生架构、深度融合BIM与GIS技术
本方案构建AI与数字孪生驱动的城市生命线监测平台，融合物联网、5G、BIM/GIS及智能算法，实现供水、燃气等基础设施的实时感知、风险预警与应急联动，形成“感知-分析-决策”闭环，全面提升城市安全韧性与治理效能。 标准体系…...
Python Android开发终极指南：从Python代码到Android APK的一站式解决方案
Python Android开发终极指南：从Python代码到Android APK的一站式解决方案 【免费下载链接】python-for-android Turn your Python application into an Android APK 项目地址: https://gitcode.com/gh_mirrors/py/python-for-android 对于Python开发者来说&a…...
AGI Python入门 保姆级教程
你不需要懂微积分，不需要背设计模式，甚至不需要知道什么是“面向对象”。 我们只做三件事：让大模型听懂人话 → 让它选择用哪个工具 → 让Python真正执行那个工具 不用怕数学，不用怕算法，只要你会“顺序、判断、循环…...
【FPGA】Vivado综合进程异常终止（PID Not Specified）排查与修复指南
1. 遇到Vivado综合进程异常终止怎么办？ 最近在调试FPGA项目时，遇到了一个让人头疼的问题：每次点击"Run Synthesis"按钮后，Vivado就会莫名其妙地卡死。刚开始我还以为是综合时间太长，但等了半小时发现进度条纹…...