Simple operation guide for realizing barrage effects in native JS

Preface

Nowadays, many live broadcast platforms or video platforms will use barrage to enhance the interaction effect with the audience. So how to use JS to achieve such an effect? Use a beginner's method to record this method. Welcome to the guidance of Daniu.

1. First of all, you must get the elements in Dom when you need to operate the document. Of course, there are many methods, so you will still use it here.

2. This is also to allow the keyboard and mouse to send a function function sendMsg(){

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

var oSpan=(“span”)

Insert the oSpan into the oVideoBox that needs to be displayed

(oSpan)

Add class to oSpan to edit the style of insertion, of course, you can also use js, the CSS style used here ("danmu")

Use innerHTML to connect user images and barrage content here to use ES6's ``

 =` < img src ="./source/" /> ${}

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

var maxTop=oVideoBox…;
var top=(()*maxTop)
 = top+ ‘px'

Of course, JS animations are also inseparable from timers. This is also used setInterval()

var timer=setInterval(()=>{
var left=
left-=10
= left+ ‘px'

Here we judge if the screen is exceeded, move the barrage and timer out

if(left<-){
clearInterval(timer);
();}},100)

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

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

oSend.οnclick=function(){Reference functionssendMsg()}

An enter can be sent afterwards, which is an event delegate window.οnkeydοwn=function(e){

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

If you are pressing the keyboard enter keycode code, it is a combination of 13 and alt

if (keyCode === 13 && ) {
sendMsg();}}

The following is the bod code, you can practice it

&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
 &lt;title&gt;Operation_Barrage&lt;/title&gt;
 &lt;style&gt;
 * {
  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;
 }
 &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;div class="wrapBox"&gt;
 &lt;div class="videoBox"&gt;
  &lt;img src="../../source/" /&gt;
  &lt;!-- &lt;span class="danmu"&gt;我是Barrage&lt;/span&gt; --&gt;
  &lt;!-- &lt;span class="danmu"&gt;我是Barrage&lt;/span&gt;
  &lt;span class="danmu"&gt;我是Barrage&lt;/span&gt;
  &lt;span class="danmu"&gt;我是Barrage&lt;/span&gt;
  &lt;span class="danmu"&gt;我是Barrage&lt;/span&gt; --&gt;
 &lt;/div&gt;
 &lt;div class="danmuSend"&gt;
  &lt;input  type="text"&gt;
  &lt;button &gt;send&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;

Here is the JS code:

<script>


 var oSend = ('#send');
 var oContent = ('#content');
 var oVideoBox = ('.videoBox');




 function sendMsg() {
 var content = ;

 var oSpan = ('span');
  = 'danmu';
  = `<img src="../../source/">${content}`;

 (oSpan);

 var maxTop =  - ;

  = (() * maxTop) + 'px';
 
 var timer = setInterval(() => {
  var left = ;
  left -= 10;
   = left + 'px';
  if (left < -) {
  clearInterval(timer);
  ();
  }
 }, 100);
 }

  = function () {
 sendMsg();
 }

  = function (e) {
 var ev = e || event;
 var keyCode =  || ;
 if (keyCode === 13 && ) {
  sendMsg();
 }
 }

</script>

Summarize

This is the end of this article about the implementation of barrage effects of native JS. This is the end of this article. For more related barrage content of native JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!