js to implement a simple bullet screen system

This article shares the specific code of native js to achieve the barrage effect for your reference. The specific content is as follows

Implementation ideas

1. Write the static page framework first

<div id='father'>
        <div id="top">
            <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video>
            <!-- controls displays the standard video controls autoplay video automatically plays (only when the muted attribute is set can it automatically play)
                 muted silent playback loop loop playback -->
        </div>
        <div id="bottom">
            <input type="text" id="txt">
            <input type="button" id="btn" value="Send">
        </div>
</div>

2. Add simple CSS code to make the page more beautiful

*{
   /*Page initialization*/
            margin: 0;
            padding: 0;
        }
        body{
            background-color: burlywood;
        }
        #father{
            width: 800px;
            height: 550px;
            margin: 50px auto;
        }
        #top{
            width: 800px;
            height: 500px;
        }
        video{
            width: 800px;
            height: 500px;
        }
        #bottom{
            width: 800px;
            height: 50px;
            background-color: #000;
            text-align: center;
            line-height: 50px;
        }

Such a simple static page is completed, and the rest is for us to write JS code.

3. Let's encapsulate a few functions for later use.

 //Randomly generate a color function rgb () {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return 'rgb('+r+','+g+','+b+')'
    }
    //Generate data integers in the specified range function stochastic(max,min){
        return Math.floor(Math.random()*(max-min)+min);
    }

The bullet comments we send are placed in the span tag. Here we need to use positioning to place the span in #top (son and father are in the same position)

 //Add span tag to <div id='#top'></div> function barrage(){
       let span = document.createElement("span");
        span.innerHTML = txt.value;
        span.style.color = rgb(); //Bullet color span.style.fontSize = stochastic(50,12) + 'px'; //Font size span.style.top = stochastic(420,0) + 'px'; //Position let right = -2000
        span.style.right = right + 'px' //The distance from the right tops.appendChild(span); //Add span tag to <div id='#top'></div> //Use timer to realize the movement of bullet screen let tiem = setInterval(()=>{
            right++;
            span.style.right = right + 'px' 
            if( right > 800 ) {   
                tops.removeChild(span); //When the bullet screen moves out of the video, destroy the element directly clearInterval(tiem); //Turn off the timer}
        },10)//If you think the speed is too slow, you can adjust it here}

4. Now that the function is encapsulated, let’s call it

let btn = document.getElementById('btn');
//Add a click event to the button btn.onclick = ()=>{
        if(txt.value=='') return; //When the user input is empty, directly return to barrage(); 
        txt.value = ''; // Clear the input box}    
     //Add a keyboard listening event (Enter)
    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 13) {
           if(txt.value=='') return;
            barrage();
            txt.value = '';
        }
    });

Finally, attach all the codes, hope it will be helpful to you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js barrage effect</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: burlywood;
        }
        #father{
            width: 800px;
            height: 550px;
            margin: 50px auto;
        }
        #top{
            width: 800px;
            height: 500px;
            position: relative;
            overflow:hidden; /*Overflow hidden*/
        }
        video{
            width: 800px;
            height: 500px;
            object-fit:fill; /*Adapt to the height and width of the specified container*/
        }
        #bottom{
            width: 800px;
            height: 50px;
            background-color: #000;
            text-align: center;
            line-height: 50px;
        }
        span{
            position: absolute;
            right: 0;
            top:0;
        }
    </style>
</head>
<body>
    <div id='father'>
        <div id="top">
            <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video>
        </div>
        <div id="bottom">
            <input type="text" id="txt">
            <input type="button" id="btn" value="Send">
        </div>
    </div>
    <script>
        let txt = document.getElementById('txt');
        let btn = document.getElementById('btn');
        let tops = document.getElementById('top');
        //Add a click event to the button btn.onclick = ()=>{
            if(txt.value=='') return; //When the user input is empty, directly return to barrage();
            txt.value = ''; // Clear the input box}    
        //Add a keyboard listening event (Enter)
        document.addEventListener('keydown', function (e) {
            if (e.keyCode == 13) {
                if(txt.value=='') return; //When the user input is empty, directly return to barrage();
                txt.value = ''; // Clear the input box}
        });
       //Randomly generate a color function rgb () {
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            return 'rgb('+r+','+g+','+b+')'
        }
        //Generate data integers in the specified range function stochastic(max,min){
            return Math.floor(Math.random()*(max-min)+min);
        }
        //Add span tag to <div id='#top'></div> function barrage(){
            let span = document.createElement("span");
            span.innerHTML = txt.value;
            span.style.color = rgb();
            span.style.fontSize = stochastic(50,12) + 'px';
            span.style.top = stochastic(420,0) + 'px';
            span.style.right = -200 + 'px';
            tops.appendChild(span);
            let right = -200;
            let tiem = setInterval(()=>{
                right++;
                span.style.right = right + 'px' 
                if( right > 800 ) {
                    tops.removeChild(span); //When the bullet screen moves out of the video, destroy the element clearInterval(tiem); //Turn off the timer}
            },10)//If you think the speed is too slow, you can adjust it here}
    </script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Simple implementation of JavaScript bullet screen effect
Realizing bullet screen special effects based on JavaScript
Example of video bullet screen effect implemented by JS
JavaScript live comment barrage cut picture function point collection effect code
JavaScript to achieve bullet screen wall effect
JavaScript to achieve video barrage effect (two versions)
Native js to achieve barrage effect
js cavans realizes static scrolling bullet screen
A simple guide to implementing bullet screen effects with native JS
js to achieve bullet screen aircraft effect

<<: Detailed explanation of Linux redirection usage

>>: MySQL 8.0.21 free installation version configuration method graphic tutorial