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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19863.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器的同源策略 - 跨域问题

1.什么是跨域 跨域问题的实质是浏览器的同源策略造成的。浏览器同源策略是浏览器为 JavaScript 施加的限制。简单点说就是非同源会出现如下等限制&#xff1a; 无法访问其他源下的网页的 Cookies&#xff0c;Storage等&#xff1b;无法访问其他源下的DOM对象和 JS 对象;无法使…

java环境搭建 Ubuntu Linux

jdk的安装和配置环境变量 使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功 使用官网下载的jdk包 直接在百度上搜索jdk&#xff0c;选择图片这个 网址:jdk下载网址 若是arm就选择带有arm的&#xff0c;反之选择x64的&#…

vscode 通过mongoose 连接mongodb atlas

了解mongodb 的项目结构 1.代表集群名称 > 2.代表数据库名称>3.代表每个 collection名称 三者范围为从大到小的关系 &#xff08;一对多&#xff09;。每个集群有不同的连接地址、用户信息&#xff08;Database Access&#xff09;、ip配置信息&#xff08;Network Acce…

51单片机(普中HC6800-EM3 V3.0)实验例程软件分析 实验一 点亮第一个LED

目录 前言 一、原理图及知识点介绍 1.1、LED原理图 1.2、MCU51原理图 二、代码分析 知识点一&#xff1a;#include "reg52.h" //此文件中定义了单片机的一些特殊功能寄存器 知识点二&#xff1a;你知道sfr P0 0x80;是怎么来的呢为什么要赋值0x80&#xff…

vxworks文件系统分析

参考https://www.freebuf.com/articles/endpoint/335030.html 测试固件 https://service.tp-link.com.cn/detail_download_7989.html 固件提取 binwalk解压固件&#xff0c;在第一部分即为要分析的二进制文件&#xff0c;可以拖进ida分析 设置为arm小端字节序&#xff0c;点…

数组中出现次数超过一半的数字——剑指 Offer 39

文章目录 题目描述法一 哈希表法二 摩尔投票 题目描述 法一 哈希表 使用哈希映射&#xff08;HashMap&#xff09;来存储每个元素以及出现的次数。对于哈希映射中的每个键值对&#xff0c;键表示一个元素&#xff0c;值表示该元素出现的次数。 class Solution { public:int maj…

程序的编译和调试

gcc编译器 gcc(GNU Compiler Collection)是GNU推出的多平台编译器&#xff0c;可将C、C源程序编译连接成可执行文件&#xff0c;支持以下后缀&#xff1a; .c c语言源代码 .h 程序所包含的头文件 .i 已经预处理过的C源代码文件 .s 汇编语言源代码文件 .o 编译后的目标文件…

解决SVN或GIT忽略提交文件的问题

背景 使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件。 git 在项目根目录新建文本文件&#xff0c;修改后缀为.gitignore 文件中添加内容 *.iml .project .gradle/ .idea/ target/ build/ .vscode/ .settings/ .facto…

Elasticsearch:语义搜索 - Semantic Search in python

当 OpenAI 于 2022 年 11 月发布 ChatGPT 时&#xff0c;引发了人们对人工智能和机器学习的新一波兴趣。 尽管必要的技术创新已经出现了近十年&#xff0c;而且基本原理的历史甚至更早&#xff0c;但这种巨大的转变引发了各种发展的“寒武纪大爆炸”&#xff0c;特别是在大型语…

SAP数据库表维护视图生成器的使用

在SAP中&#xff0c;经常需要自定义数据库表。而且可能需要人工维护数据库表中的数据&#xff0c;可以通过SM30进行维护数据&#xff1b;但是SM30事务的权限太大&#xff0c;不适宜将SM30直接分配&#xff1b;因此&#xff0c;可以通过给维护表分配事务代码&#xff0c;来达到控…

无涯教程-Perl - 环境配置

在开始编写Perl程序之前&#xff0c;让我们了解如何设置我们的Perl环境。 您的系统更有可能安装了perl。只需尝试在$提示符下给出以下命令- $perl -v 如果您的计算机上安装了perl&#xff0c;那么您将收到以下消息: This is perl 5, version 16, subversion 2 (v5.16.2) b…

MySQL数据库——DQL操作——基本查询

文章目录 前言事前准备——测试数据整表查询指定列查找别名查询MySQL运算符条件查询模糊查询排序查询聚合查询分组查询分组之后的条件筛选 分页查询将整张表的数据插入到另一张表中 前言 MySQL数据库常见的操作是增删查改&#xff0c;而其中数据的查询是使用最多&#xff0c;也…

Modbus TCP转Profinet网关modbus tcp转以太网

大家好&#xff0c;今天我们来聊一聊如何使用捷米特的Profinet转modbusTCP协议转换网关在博图上进行非透传型配置。 1, 首先&#xff0c;我们需要安装捷米特JM-TCP-PN的GSD文件&#xff0c;并根据现场设备情况配置modbusTCP地址。然后&#xff0c;在博图中添加该GSD文件&#x…

了解垃圾回收算法

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 垃圾回收&#xff08;Garbage Collect&#xff09;是Java语言中的一种自动内存管理机制&#xff0c;用于自动回收不再使用的对象所占用的内存空间。Java虚拟机会自动追踪和…

算法39:Excel 表列序号

一、需求 给你一个字符串 columnTitle &#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如&#xff1a; A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1&#xff1a; 输入: columnTitle “A” 输出: 1 示例 2&…

uC-OS2 V2.93 STM32L476 移植:系统启动篇

前言 前两篇已经 通过 STM32CubeMX 搭建了 NUCLEO-L476RG 的 STM32L476RG 的 裸机工程&#xff0c;下载了 uC-OS2 V2.93 的源码&#xff0c;并把 uC-OS2 的源文件加入 Keil MDK5 工程 本篇适配 uC-OS2 的 系统定时器&#xff08;Systick&#xff09;与 PendSV_Handler&#xf…

leetcode 763. 划分字母区间

2023.8.3 本题的关键是要确保同一字母需要在同一片段中&#xff0c;而这就需要关注到每个字母最后一次出现的位置。 思路&#xff1a;用一个哈希表保存每个字母&#xff08;26个&#xff09;最后一次出现的位置。然后从头遍历&#xff0c;不断更新最右边界&#xff0c;直到当前…

Java电子招投标采购系统源码-适合于招标代理、政府采购、企业采购、等业务的企业 tbms

​ 功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查…

[数据分析与可视化] Python绘制数据地图4-MovingPandas入门指北

MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库&#xff0c;用于处理移动物体的轨迹数据。它提供了一组强大的工具&#xff0c;可以轻松地加载、分析和可视化移动物体的轨迹。通过使用MovingPandas&#xff0c;用户可以轻松地处理和分析移动对象数据&#x…

[JAVA基础]自动拆装箱NPE问题

1.自动拆装箱场景 自动装箱 当把字面量转换成包装类的时候会自动装箱 比如&#xff1a; Integer a 1; Integer b 1; 自动拆箱 当你对包装类的对象进行运算&#xff08;如加法、减法等&#xff09;时&#xff0c;Java会自动进行拆箱操作。拆箱是将包装类型的对象转换为相应的基…