JavaScript implements simple barrage effect example analysis-JS Tutorial-php.cn

JavaScript implements simple barrage effect example analysis

黄舟

Release： 2017-05-27 10:26:59

Original

3114 people have browsed it

This article mainly helps you to simply realize the JavaScriptbarrage effect

I don’t know if you have felt it, but the barrage is another good show! !
However, I personally prefer not to be disturbed by barrages when watching TV. Today we will write a simple barrage. How simple is it? Take a look at the effect:

As you can see from the picture, our silly HTML structure is indeed very simple.
is composed of a p, an input box and a button.

 <p id="box" class="box"></p>
 <input type="text" id="txt" />
 <button onclick="send()">提交内容</button>

Copy after login

First post jsCode:

 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;;
  }
 }

Copy after login

The principle is briefly explained:

First step, We need to get the content in the input box, var word = $('txt').value;
Second step, we have to try our best to stuff this content into the p to be scrolled and displayed Inside, there are three principles: ① Random color ② Random height ③ The distance from the left border changes in real time;
The third step, append this content to p $('box').appendChild (span);

It can be seen from the principles of the above steps that the second step is the most critical step,

realize the first principle:

 var color1 = parseInt(Math.random() * 256);
 var color2 = parseInt(Math.random() * 256);
 var color3 = parseInt(Math.random() * 256);
 var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
 span.style.color = color;

Copy after login

小Extension:

RGB(R,G,B);
R:
Red value. Positive Integer | Percentage
G:
Green value. Positive integer | Percentage
B:
Blue value. Positive integer | Percent
This should be easy to understand.

Implement the second principle:

var top = parseInt(Math.random() * 500) - 20;
top = top < 0 ? 0 : top;
span.style.top = top + "px";

Copy after login

Implement the third principle:

 span.style.left = &#39;500px&#39;;
 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;;
  }
 }

Copy after login

is to use the principle of timer to let the value of left changes in real time.

At this point, it should be very clear.

The above is the detailed content of JavaScript implements simple barrage effect example analysis. For more information, please follow other related articles on the PHP Chinese website!