Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript implementiert eine einfache Beispielanalyse für den Sperreffekt

黄舟
Freigeben: 2017-05-27 10:26:59
Original
3100 Leute haben es durchsucht

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>
Nach dem Login kopieren

Veröffentlichen Sie zuerst den js-Code:

 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;;
  }
 }
Nach dem Login kopieren

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;
Nach dem Login kopieren

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";
Nach dem Login kopieren

Um das dritte Prinzip umzusetzen:

 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;;
  }
 }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!