纯js实现弹幕效果

最新推荐文章于 2025-03-03 10:26:05 发布

CrayonJ

最新推荐文章于 2025-03-03 10:26:05 发布

阅读量872

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/Crayon111/article/details/126058824

版权

这篇博客展示了如何用Angular框架创建一个弹幕展示功能。HTML部分包括一个评论容器和输入框，用于显示和输入弹幕。TypeScript部分定义了评论列表和内容，并实现了添加新评论及定时移除旧评论的逻辑。CSS部分提供了弹幕从左到右移动的动画效果。这个例子是前端开发中动态内容展示的一个实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码是通过angular实现的，需要使用前自行修改成所使用的框架。

html部分

<div class="commentsContainer" id="commentContainer">
  <div *ngFor="let item of commentList">
    <div class="bullet" [ngStyle]="{top: item.height+'px'}">{{item.text}}</div>
  </div>
</div>

<div class="writeComment">
  <input class="commentInput" type="text" placeholder="请输入弹幕" [(ngModel)]="commentContent">
  <button (click)="postComment()">发送</button>
</div>

ts部分

commentList: Array<any> = []
commentContent: string = ""

//随机函数
getRandom(min: number, max: number): number {
 let num: number = Math.floor(Math.random() * (max - min))
  return num
}

postComment() {
  this.commentList.push({text:this.commentContent,height: this.getRandom(0,40)})

  setTimeout(() => {
    this.commentList.shift()
  }, 8000);

  this.commentContent = '' //clear content
}

css部分

/*从左往右的动画*/
@-webkit-keyframes moveto{
 0% {
    left: 0px;
  }

  100%{
    left: 100%;
  }
}

.bullet {
  font-size: 22px;
  position: absolute;
  -webkit-animation: moveto 15s ease-out;
}