JavaScript Bilibili评论框

Hi，本文展示如何使用JavaScript实现Bilibili评论框按下回车按键发送评论，本文为本人自己摸索的内容（编程小白），因此展示的内容、代码语法可能不正确，还请理解（李姐万岁）

一、效果展示

二、HTML结构

首先使用HTML仿照一个Bilibili评论框的、发布评论的界面。

<!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>Bilibili评论框</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('https://ice.frostsky.com/2024/03/18/f6c5e664e551621c3dde1a178bc363e0.webp') no-repeat center / cover;
margin-right: 20px;
      }
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
      }
.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;
transition: all 0.5s;
      }
.list {
min-width: 400px;
max-width: 800px;
display: flex;
      }
.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;
      }
.list .item .text {
color: #333;
padding: 10px 0;
text-autospace: inherit;
word-break: break-all;
      }
.list .item .time {
color: #999;
font-size: 12px;
      }
.Dis{
display: block;
      }
.avatarA{
display: flex;
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
/* margin-left: 20px; */
      }
.avatarA img{
padding-right: 20px;
      }
.info{
margin-left: 65px;
      }
#tx{
font-family: '微软雅黑';
      }
.name>.Level{
background-color: red;
border-radius: 20%;
color: lightpink;
font-size: 12px;
padding: 0 2px;
margin-left: 0.2rem;
      }
.name>.HuiYuan{
background-color: deeppink;
border-radius: 10%;
color: white;
font-size: 12px;
padding: 0 2px;
margin-left: 0.2rem;
      }
</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" style="display: none;">
<span class="avatarA"><img src="https://ice.frostsky.com/2024/03/18/f6c5e664e551621c3dde1a178bc363e0.webp" ></span>
<div class="info">
<p class="name">北牧<span class="Level">Lv6</span><span class="HuiYuan">年度大会员</span></p>
<p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
          <p class="time">2024-3-18 20:00:00</p>
</div>
</div>
</div>
  </body>
</html>

三、Js事件

首先，当我们点击评论框时，评论框的高度改变，并在评论框的右下角显示当先输入和限制的字数，当按下发送按钮或者按下键盘回车按键时触发事件将内容传输给评论区的指定元素，并清空评论框内容、归零字数统计

获取HTML元素，获取评论框元素、发送按钮元素和底部的评论区元素。

// 获取输入框元素
let Input = document.querySelector('#tx');
// 获取字数统计元素
let total = document.querySelector('.total');
// 获取评论区元素
let item = document.querySelector('.item');
// 获取评论区评论内容元素
let text=document.querySelector('.text');
// 获取发送按钮元素
let Btn=document.querySelector('button');

①：当评论框获得”焦点”时，评论框高度改变，失去焦点时评论框恢复原样

②：当评论框触发”输入”时，字数统计改变

③：当”点击”发送按钮时，将内容发送

分别绑定两个“焦点”、“输入”、“点击”的监听事件,共四个事件。

// 获得焦点事件
Input.addEventListener('focus', function() {})
// 失去焦点事件
Input.addEventListener('blur', function() {})
// 输入事件
Input.addEventListener('input', function() {})
// 点击事件
Btn.addEventListener('click',function() {})

当获得焦点时显示评论框右下角的字数统计元素，本人使用的是将字数统计区域使用CSS将透明度设置为0，所以在JS中将透明度设置为1即可显示。

// 获得焦点时显示
total.style.opacity = '1';
// 失去焦点时隐藏
total.style.opacity = '0';

接下来实现当输入内容时统计输入的字数，在输入内，将评论框中输入内容的长度的数值传递给评论区的指定区域。

// 评论区的指定区域     输入内容的长度
total.innerText = `${Input.value.length} / 200字`;

然后实现按下回车按键将输入的内容传递给评论区，并清空输入框内容、重置输入的字数统计。

首先对输入框事件绑定一个键盘抬起的事件，并使用Event对象进行判断按下的按键。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

——W3School全套教程

Input.addEventListener('keyup',function(event){
if(event.key==='Enter'){

       }
        });

由于程序会默认把空格因为认为是一个字符，当评论框全是空格是评论仍可发送出去，我们可以使用trim() 方法判断空格。

trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符其他空白符等。

trim() 方法不会改变原始字符串。

trim() 方法不适用于 null, undefined, Number 类型。

——菜鸟教程

Input.addEventListener('keyup',function(event){
if(event.key==='Enter'){
if(Input.value.trim() != ''){
        }
      }
    });

这样可以判断当前部为空格时不触发发送事件，并且不影响文字中间、文字尾部空格。

接下来我使用一个函数来放置回车发送事件和点击发送按钮事件共同需要的功能。

function BiliBili(){
// 显示评论区
  item.style.display='block';
  // 将输入的内容传递给评论区
  text.innerText=Input.value;
  // 发送后重置字数统计
  total.innerText='0 / 200字';
// 发送后清空输入框内容
  Input.value=null;
}

当按下回车按键并判断前部不是空格时，则调用上边的函数。

Input.addEventListener('keyup',function(event){
if(event.key==='Enter'){
if(Input.value.trim() != ''){
          BiliBili();
        }
      }
    });

此时程序基本完善~

四、完整代码

OK，本文到此结束，以上内容均为本人所学知识，学艺不精，如有错误还请理解。

温馨提示：最后更新于2024-03-28 00:20:56，某些文章具有时效性，若有错误或已失效，请评论反馈。

版权声明 1、本网站名称：北牧日记
2、本站永久网址：www.imbeimu.top
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们进行更新。

THE END

网络技术
# JavaScript

JavaScript Bilibili评论框

一、效果展示

二、HTML结构

三、Js事件

四、完整代码

请登录后发表评论