Home > Article > Web Front-end > How to implement barrage function in js

How to implement barrage function in js

小老鼠Original: 2024-03-04 17:05:551102browse

Implementation method: 1. Create html file; 2. Add html code structure; 3. Use div, input, and button tags in the body tag to assign the page design effect display box, input box, and barrage submission button ; 4. Add script tags and write js code to achieve the barrage effect; 5. View the design effect through the browser.

How to implement the barrage function in js

Specific operation method:

1. First create An html file.

2. Add the html code structure in the html file.

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
        <title>弹幕功能</title>
    </head>
    <body>
    </body>
</html>

3. Then use div, input, and button tags in the body tag in the HTML code structure to design an effect display box, input box, and barrage submission button for the page respectively.

<div id="box" class="box"></div>
<input type="text" id="txt" />
<button onclick="send()">发送弹幕</button>

4. Add script tags in the html tags in the html structure and write js code to achieve the barrage effect.

<style>
   function $(str) {
return document.getElementById(str);
}
function send() {
var word = $(&#39;txt&#39;).value;
var span = document.createElement(&#39;span&#39;);
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = &#39;absolute&#39;;
span.style.top = top + "px";
span.style.color = color;
span.style.left = &#39;500px&#39;;
span.style.whiteSpace = &#39;nowrap&#39;;
var nub = (Math.random() * 10) + 1;
span.setAttribute(&#39;speed&#39;, nub);
span.speed = nub;
span.innerHTML = word;
$(&#39;box&#39;).appendChild(span);
$(&#39;txt&#39;).value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $(&#39;box&#39;).children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
}
}
  </style>

5. Finally, you can read the html file through the browser to view the design effect.

The complete sample code is as follows:



    

        弹幕功能
    
    
      <div id="box" class="box"></div>
<input type="text" id="txt" />
<button onclick="send()">发送弹幕</button>
    
    <script>
      function $(str) {
return document.getElementById(str);
}
function send() {
var word = $(&#39;txt&#39;).value;
var span = document.createElement(&#39;span&#39;);
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = &#39;absolute&#39;;
span.style.top = top + "px";
span.style.color = color;
span.style.left = &#39;500px&#39;;
span.style.whiteSpace = &#39;nowrap&#39;;
var nub = (Math.random() * 10) + 1;
span.setAttribute(&#39;speed&#39;, nub);
span.speed = nub;
span.innerHTML = word;
$(&#39;box&#39;).appendChild(span);
$(&#39;txt&#39;).value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $(&#39;box&#39;).children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
}
}
    </script>

The above is the detailed content of How to implement barrage function in js. For more information, please follow other related articles on the PHP Chinese website!

架构 html JS input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement jsp paging functionNext article：How to implement jsp paging function

See more

How to implement barrage function in js

Related articles