基于vue3实现弹幕功能（后端同学写前端，手把手教学，参考黑马视频）

首先把参考的黑马视频贴出来

99个前端核心技巧之实现弹幕功能！黑马道长精讲，系统细致，提升必刷！-黑马程序员武汉中心_哔哩哔哩_bilibili

首先，我们要创建一个发送弹幕的与呈现弹幕的

相关样式

相关css样式
.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    opacity: 0.5;
    top: 0px;
    left: 0px;
}
.bottom {
    width: 100%;
    height: 77px;
    background: linear-gradient(#ccc,#4a4a4a);
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    line-height: 77px;
}
.content {
    width: 50%;
    min-width: 200px;
    height: 37px;
    border: none;
    border-radius: 10px 0px 0px 10px;
    font-size: 16px;
    padding: 0 10px;
    outline: none;
}
.send {
    background-color: green;
    color: #fff;
    display: inline-block;
    width: 100px;
    height: 38px;
    line-height: 37px;
    text-align: center;
    position: relative;

    top: 2px;
    border-radius: 0px 10px 10px 0px;
    text-decoration: none;
    font-family: "Microsoft YaHei";
}

效果：

之后我们意识到，只要文字在mask里移动展示就可以了

要求：首先要文字在右边随机位置显示

之后文字平移到左边

做好前置工作之后我们的思路就明确了

功能1：点击按钮生成div在页面上显示

首先获取mask并创建点击事件

const mask = ref(null);
onMounted(() => {
  mask.value = document.querySelector('.mask');
});

const sent = ()=>{
     //创建一个div
     const div - document.createElement('div')
     //将div加入到mask中
     mask.value.append(div)
}

之后我们点击发送按钮之后就可以看到有个div加入到mask中了

之后我们需要给div输入框的内容与添加样式类名

需要获取content（输入框）

const mask = ref(null);
const content = ref(null);
onMounted(() => {
  mask.value = document.querySelector('.mask');
  content.value = document.querySelector('.content');
});

const sent = ()=>{
     //获取内容可以顺带做个判断是否为空
     if (!content.value.value) return alert('请输入弹幕内容，亲')
     //创建一个div
     const div - document.createElement('div')
     //将div加入到mask中
     mask.value.append(div)
     //给div设置内容，内容是用户输入的文字
     div.innerHTML = content.value.value
     //给div添加text类名
     div.classList.add('TanText')
     //点击发送后清空文本框
     content.value.value= ''
     //让文本框重新获取焦点（增强用户体验）
     content.value.focus()
}

 在这里有一个关键，就是这个div的类名需要定义在全局文件中，不然会没有效果，可能和渲染覆盖有关。

//在App.vue

功能2：随机生成这个div的位置（就像弹幕那样）

要求：需要在屏幕右边，且在一定范围内生成

说到范围，就要mask高度-底边高度(就是放输入框那个div)-div弹幕本身的高度，这样就完美了

所以需要先获取bottom

const mask = ref(null);
const bottom = ref(null);
const content = ref(null);
onMounted(() => {
  mask.value = document.querySelector('.mask');
  bottom.value = document.querySelector('.bottom');
  content.value = document.querySelector('.content');

});
const sent = ()=>{
      //获取内容可以顺带做个判断是否为空
     if (!content.value.value) return alert('请输入弹幕内容，亲')
     //创建一个div
     const div - document.createElement('div')
     //将div加入到mask中
     mask.value.append(div)
     //给div设置内容，内容是用户输入的文字
     div.innerHTML = content.value.value
     //给div添加text类名
     div.classList.add('TanText')
     //点击发送后清空文本框
     content.value.value= ''
     //让文本框重新获取焦点（增强用户体验）
     content.value.focus()
     //生成随机数(因为Math.random()默认生成0-1的数，让它乘范围就可以满足随机生成了)
     const random = Math.random() * (mask.value.offsetHeight - bottom.value.offsetHeight - div.offsetHeight)
     //给div设置样式
     div.style.top = random + 'px'     
}

功能3：让这个div动起来

说到动起来就想到

平移：transform: translateX()

过度: transition: all .3s

const sent = ()=>{
      //获取内容可以顺带做个判断是否为空
     if (!content.value.value) return alert('请输入弹幕内容，亲')
     //创建一个div
     const div - document.createElement('div')
     //将div加入到mask中
     mask.value.append(div)
     //给div设置内容，内容是用户输入的文字
     div.innerHTML = content.value.value
     //给div添加text类名
     div.classList.add('TanText')
     //点击发送后清空文本框
     content.value.value= ''
     //让文本框重新获取焦点（增强用户体验）
     content.value.focus()
     //生成随机数(因为Math.random()默认生成0-1的数，让它乘范围就可以满足随机生成了)
     const random = Math.random() * (mask.value.offsetHeight - bottom.value.offsetHeight - div.offsetHeight)
     //给div设置样式
     div.style.top = random + 'px'     
     //让这个div动起来
     //平移：transform: translateX()
     //过度:  transition: all .3s
     //linear为速度平滑
     div.style.transition = 'all 5s linear'
     //注意，下面那个是反引号
     div.style.transform = `translateX(-${mask.value.offsetWidth}px)`
}

最终效果：

本文基于作者自身的学习总结。如有错误，恳请指出。 如果对您有帮助的话，请给我点个赞吧。作者在后面也会分享文章，要是感兴趣也可以给我点个关注。