Simple operation guide for native JS to realize barrage effect

2021-09-16 06:02:53
OfStack

Preface

Nowadays, many live broadcast platforms or video platforms will use barrage to enhance the interaction effect with the audience, so how to achieve this effect with JS? Record this method with a beginner's method, and welcome Daniel's guidance.

1. First of all, you need to get the elements in Dom when operating the document. Of course, there are many methods, and document. querySelector is still used here.

2. This is also for both keyboard and mouse to send. It encapsulates a function function sendMsg () {

First of all, you need to create a container to accept the content you edit. Here, use span tag, of course, other tags can also be used


var oSpan=document.cerateElement( " span " )

Insert oSpan into oVideoBox to be displayed


oVideoBox.appendChild(oSpan)

Add class to oSpan to edit the inserted style. Of course, you can also use js, and here you use CSS style oSpan. classList. add ("danmu")

Use innerHTML to connect user images and barrage contents. Here, use one of ES6.


oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}

Calculate the initial position of the barrage. The initial position of left displacement is the width of oVideoBox, oVideoBox. offsetWidth. It is also the initial position of oSpan, oSpan. offsetLeft
The initial displacement of top is the random height within oVideoBox to avoid exceeding


var maxTop=oVideoBox … clientHeight-oSpan.offsetHeight;
var top=Math.round(Math.random()*maxTop)
oSpan.style.top = top+  ' px'

Of course, the animation of JS can not be separated from the timer. setInterval () is also used here


var timer=setInterval(()=>{
var left=oSpan.offsetLeft
left-=10
oSpan.style.left= left+  ' px'

Judge 1 here. If it exceeds the screen, move the barrage and timer out


if(left<-oSpan.offsetWidtb){
clearInterval(timer);
oSpan.remove();}},100)

The above is completed, and the simple version of the barrage function is encapsulated, which can be quoted later.

Events start with clicks, and barrage also creates click events oSend. onclick.


oSend. O nclick=function(){ Reference function sendMsg()}

enter that can be followed by a keyboard can be sent, which is an event delegate window. O nkeyd O wn = function (e) {


var ev = e || event;
var keyCode = ev.keyCode || ev.which;

If the keyboard enter is pressed, it is judged that the keycode code is a combination of 13 and alt


if (keyCode === 13 && ev.altKey) {
sendMsg();}}

The following is the bod code, which can be practiced


<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title> Homework _ Barrage </title>
 <style>
 * {
  padding: 0;
  margin: 0;
 }

 body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .wrapBox {
  width: 800px;
  height: 550px;
  border: 1px solid #000;
  margin: 50px auto 0;
 }

 .videoBox {
  height: 500px;
  position: relative;
  overflow: hidden;
 }

 .videoBox img {
  width: 100%;
  height: 100%;
 }

 video {
  width: 100%;
  /* height: 500px; */
 }

 .danmuSend {
  display: flex;
  height: 50px;
 }

 #content {
  flex: 1;
 }

 #send {
  width: 100px;
 }

 .danmu {
  color: #f00;
  font-size: 20px;
  position: absolute;
  left: 800px;
  top: 0;
  white-space: nowrap;
 }

 .danmu img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  vertical-align: middle;
  display: inline-block;
 }
 </style>
</head>

<body>
 <div class="wrapBox">
 <div class="videoBox">
  <img src="../../source/bg.jpg" />
  <!-- <span class="danmu"> I am the barrage </span> -->
  <!-- <span class="danmu"> I am the barrage </span>
  <span class="danmu"> I am the barrage </span>
  <span class="danmu"> I am the barrage </span>
  <span class="danmu"> I am the barrage </span> -->
 </div>
 <div class="danmuSend">
  <input id="content" type="text">
  <button id="send"> Send </button>
 </div>
 </div>
</body>

Here is the code for JS:


oVideoBox.appendChild(oSpan)

Summarize