How to implement the barrage function in js_How to implement the barrage function in js-JS Tutorial-php.cn

How to implement barrage function in js

小老鼠

Release： 2024-03-04 17:05:55

Original

1100 people have browsed it

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 barrage function in js

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!