JavaScript implementiert eine einfache Beispielanalyse für den Sperreffekt

Dieser Artikel hilft Ihnen hauptsächlich dabei, den JavaScriptBarrage-Effekt einfach zu implementieren

Ich frage mich, ob Sie es gespürt haben, Barrage ist eine weitere gute Show! !
Allerdings bevorzuge ich persönlich, beim Fernsehen nicht durch Sperrfeuer gestört zu werden. Heute werden wir ein einfaches Sperrfeuer schreiben. Wie einfach ist es? Schauen Sie sich den Effekt an:

Wie Sie auf dem Bild sehen können, ist unsere alberne HTML-Struktur tatsächlich sehr einfach.
besteht aus einem p, einem Eingabefeld und einer Schaltfläche.

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

Veröffentlichen Sie zuerst den js-Code:

 function $(str) {
  return document.getElementById(str);
 }
 function send() {
  var word = $('txt').value;
  var span = document.createElement('span');
  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;;
  }
 }

Das Prinzip wird kurz erklärt:

Der erste Schritt , wir müssen den Inhalt in das Eingabefeld bekommen, var word = $('txt').value;
Der zweite Schritt, wir müssen unser Bestes geben, um dies zu stopfen Inhalt in den Schlüssel Es gibt drei Prinzipien: ① Zufällige Farbe ② Zufällige Höhe ③ Der Abstand vom linken Rand ändert sich in Echtzeit
Der dritte Schritt, diesen Inhalt an p $('box ' anhängen; ).appendChild(span);

Aus den Prinzipien der obigen Schritte geht hervor, dass der zweite Schritt der kritischste Schritt ist

Um das erste Prinzip umzusetzen:

 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;

Kleine Erweiterung:

RGB(R,G,B);
R:
Rotwert. PositivGanzzahl |. Prozentsatz
G:
grüner Wert. Positive ganze Zahl |. Prozent
B:
blauer Wert. Positive ganze Zahl |. Prozent
Dies sollte leicht zu verstehen sein.

Um das zweite Prinzip umzusetzen:

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

Um das dritte Prinzip umzusetzen:

 span.style.left = '500px';
 setInterval(move, 200);
 function move() {
  var spanArray = $('box').children;
  for (var i = 0; i < spanArray.length; i++) {
   spanArray[i].style.left =
    parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
  }
 }

besteht darin, das Prinzip des Timers zu verwenden. Lassen Sie den Wert von left in Echtzeit ändern.

An dieser Stelle sollte es ganz klar sein.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert eine einfache Beispielanalyse für den Sperreffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!