So implementieren Sie die Sperrfunktion in js_So implementieren Sie die Sperrfunktion in js-js-Tutorial-php.cn

So implementieren Sie die Sperrfunktion in js

小老鼠

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

Original

1254 Leute haben es durchsucht

Implementierungsmethode: 1. Erstellen Sie eine HTML-Datei. 2. Fügen Sie die HTML-Codestruktur hinzu. 3. Verwenden Sie die Tags div, input und button im Body-Tag, um das Effektanzeigefeld, das Eingabefeld und die Sperrschaltfläche für die Übermittlung zu entwerfen Seite; 4. Fügen Sie ein Skript-Tag hinzu und schreiben Sie JS-Code, um den Sperreffekt zu erzielen. 5. Sehen Sie sich den Designeffekt über den Browser an.

So implementieren Sie die Sperrfunktion in js

Spezifische Operationsmethode:

1 Erstellen Sie zunächst eine HTML-Datei.

2. Fügen Sie der HTML-Datei eine HTML-Codestruktur hinzu.

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

Nach dem Login kopieren

3. Verwenden Sie dann div-, input- und button-Tags im Body-Tag in der HTML-Codestruktur, um jeweils ein Effektanzeigefeld, ein Eingabefeld und eine Barrage-Übermittlungsschaltfläche für die Seite zu entwerfen.

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

Nach dem Login kopieren

4. Fügen Sie Skript-Tags zu den HTML-Tags in der HTML-Struktur hinzu und schreiben Sie JS-Code, um den Sperreffekt zu erzielen.

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

Nach dem Login kopieren

5. Schließlich können Sie die HTML-Datei über den Browser lesen, um den Designeffekt anzuzeigen.

Der vollständige Beispielcode lautet wie folgt:



    

        弹幕功能
    

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Sperrfunktion in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!