Teilen Sie JS vier lustige Hacker-Hintergrundeffektcodes

Inhaltsverzeichnis

Beispiel 1
Beispiel 2
Beispiel 3
Beispiel 4

Beispiel 1

<html>
<Kopf>
    <Titel>Die Matrix</Titel>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            Typ="text/javascript"></script>
    <meta charset="utf-8">
    <Skript>
        /*
            ① Verwenden Sie setInterval(draw, 33), um das Aktualisierungsintervall festzulegen. ② Verwenden Sie String.fromCharCode(1e2+Math.random()*33), um zufällig Buchstaben zu generieren. ③ Verwenden Sie ctx.fillStyle='rgba(0,0,0,.05)'; ctx.fillRect(0,0,width,height); ctx.fillStyle='#0F0′;, um wiederholt einen halbtransparenten schwarzen Hintergrund mit einer Opazität von 0,5 zu generieren. ④ Verwenden Sie x = (index * 10)+10; und yPositions[index] = y + 10;, um sequenziell die Position der angezeigten Buchstaben zu bestimmen. ⑤ Verwenden Sie fillText(text, x, y);, um einen Buchstaben an der angegebenen Position anzuzeigen. Durch Wiederholen der obigen Schritte erzielen Sie den Titeleffekt von „The Matrix“.
        */
        $(Dokument).bereit(Funktion () {
            var s = Fenster.Bildschirm;
            var Breite = q.Breite = s.Breite;
            var Höhe = q.Höhe;
            var yPositionen = Array(300).join(0).split('');
            var ctx = q.getContext('2d');
            var zeichnen = funktion () {
                ctx.fillStyle = "rgba(0,0,0,.05)";
                ctx.fillRect(0, 0, Breite, Höhe);
                ctx.fillStyle = "rot";
                ctx.font = "10pt Georgia";
                yPositionen.map(Funktion (y, Index) {
                    text = String.fromCharCode(1e2 + Math.random() * 33);
                    x = (Index * 10) + 10;
                    q.getContext('2d').fillText(text, x, y);
                    wenn (y > Math.random() * 1e4) {
                        yPositionen[index] = 0;
                    } anders {
                        yPositionen[index] = y + 10;
                    }
                });
            };
            RunMatrix();
            Funktion RunMatrix() {
                Spielintervall = Intervall festlegen (Ziehung, 30);
            }
        });
    </Skript>
</Kopf>
<Text>
    <div ausrichten="zentrieren">
        <canvas id="q" width="500" height="500"></canvas>
    </div>
</body>
</html>

Beispiel 2

<html>
<Kopf>
 
    <title>Kennen Sie HACKER-2?</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            Typ="text/javascript"></script>
</Kopf>
 
<Text>
    <div ausrichten="zentrieren">
        <canvas id="myCanvas" width="1024" height="800" style="border:1px solid #c3c3c3;">
            Ihr Browser unterstützt das HTML5-Canvas-Tag nicht.
        </Leinwand>
        <Skripttyp="text/javascript">
            var YPositions = Array(51).join(0).split('');
            /*
                Die Methode join() wird verwendet, um alle Elemente eines Arrays in einen String zu packen. Die Methode split() wird verwendet, um einen String in ein String-Array aufzuteilen*/
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var zeichnen = funktion () {
                ctx.fillStyle = "rgba(0,0,0,.05)";
                ctx.fillRect(0, 0, 1024, 800); ctx.fillStyle = "#0f0";
                YPositions.map(Funktion (y, Index) {
                    /*
                        map() übergibt jedes Element durch die Funktion an den aktuellen passenden Satz und generiert ein neues jQuery-Objekt, das den Rückgabewert enthält*/
                    x = (Index * 10);
                    ctx.fillText(parseInt(Math.random() * 10), x, y);
                    /*
                        Erzeugen Sie ein 'a'-Zeichen an der Koordinatenposition (x,y), wobei der Index der Index von Ypositions*/ ist.
                    wenn (y > 500) {
                        YPositionen[index] = 0;
                    } anders {
                        YPositionen[index] = y + 10;
                    }
                    /*
                        Wenn das neu generierte Zeichen das Ende von <canvas> erreicht hat, wird die Position des nächsten neuen Zeichens an den Ursprung zurückgesetzt*/
                });
            };
            setzeInterval(zeichnen, 30);
        </Skript>
</body>
</html>

Beispiel 3

<html>
<Kopf>
 
    <title>Kennen Sie HACKER-1?</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</Kopf>
 
<Text>
    <div ausrichten="zentrieren">
        <canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;">
            <!-- Das <canvas>-Tag wird in Browsern unter IE9 nicht unterstützt-->
            Bitte aktualisieren Sie Ihren Browser
        </Leinwand>
        <br>
        <button type="button" id="puse">puse</button>
        <button type="button" id="run">ausführen</button>
    </div>
    <Skripttyp="text/javascript">
        $(Dokument).bereit(Funktion() {
        /*
            var c2 = document.getElementById("myCanvasMatrix");
            var ctx2 = c2.getContext("2d");
            Wobei „ctx2“ dem folgenden „ctx1“ entspricht
        */
        var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
        /*
            $("").get(0) bedeutet, dass die interne DOM-Objektreferenz abgerufen wird. Nachdem Sie das DOM-Objekt des Objekts abgerufen haben, können Sie die entsprechende DOM-API verwenden
        */
        /*
            Die Methode getContext() gibt eine Umgebung zum Zeichnen auf der Leinwand zurück.
            Canvas.getContext(Kontext-ID);
            Der einzige gültige Wert des ContextID-Parameters ist „2d“, was bedeutet, dass 2D-Zeichnungen unterstützt werden. „3d“ wird möglicherweise in Zukunft unterstützt.
        */
        var Matrix = Funktion(){
            /*
                var my_gradient = ctx1.createLinearGradient(0,0,0,170);
                my_gradient.addColorStop(0,"schwarz");
                my_gradient.addColorStop(1,"weiß");
                ctx1.fillStyle=mein_gradient;
            */
            ctx1.fillStyle = "rgba(0,0,0,.07)";
            /*
                Die Eigenschaft fillStyle legt die Farbe, den Farbverlauf oder das Muster fest, mit dem ein Bild gefüllt wird, oder gibt diese zurück.
                rgba(R,G,B,A)
                wobei '.05' die Alpha-Transparenz darstellt*/
            ctx1.fillRect(0,0,500,500);
            /*
                Die Methode fillRect() füllt das angegebene Rechteck mit der Farbe, dem Farbverlauf und dem Muster, die durch das fillStyle-Attribut angegeben werden.
            ctx1.fillStyle = "#0f0";
            ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));
            ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));
            /*
                Das Prinzip besteht darin, kontinuierlich neue transparente Hintergründe und anzuzeigende Inhalte zu generieren.
                Auf diese Weise überdeckt der neue Hintergrund weiterhin den alten Anzeigeinhalt und der neue Inhalt fällt auf*/
        };
        führeFun();
        Variablen-ID;
        Funktion stopFun(){
            Intervall löschen(id);
        }
        Funktion runFun(){
            id = Intervall festlegen(Matrix,50);
        /*
           setInterval() Definition und Verwendung:
           Die Methode setInterval() ruft in einem angegebenen Zeitraum (in Millisekunden) eine Funktion auf oder wertet einen Ausdruck aus.
           Die Methode setInterval() ruft die Funktion wiederholt auf, bis clearInterval() aufgerufen oder das Fenster geschlossen wird. Der von setInterval() zurückgegebene ID-Wert kann als Parameter für die Methode clearInterval() verwendet werden.
        */
        }
        $("button#puse").klick(function() {
            stopFun();
        });
        $("button#run").click(function() {
            führeFun();
        });
    });
    </Skript>
</body>
</html>

Beispiel 4

<!DOCTYPE html>
 
<html>
 
<Kopf>
 
<meta charset="utf-8">
 
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein">
 
<meta http-equiv="X-UA-kompatibel" content="IE=Edge,chrome=1">
 
</Kopf>
 
<Text>
 
<canvas id="Inhalt" Breite="1250px" Höhe="602px"></canvas>
 
</body>
 
</html>
 
<Skript>
 
  var cav = document.getElementById('Inhalt');
 
  var w = Fenster.Bildschirm.Breite;
 
  var h = Fenster.Bildschirm.Höhe;
 
  var yPositionen = Array(300).join(0).split('');
 
  var ctx = cav.getContext('2d');
 
  var zeichnen = funktion(){
 
 
 
    ctx.fillStyle = "rgba(0,0,0,.05)";
 
    ctx.fillRect(0,0,w,h);
 
    ctx.fillStyle = "grün";
 
    ctx.Schriftart = "20px";
 
 
 
    yPositionen.map(Funktion(y,Index){
 
      text = String.fromCharCode(1e2+Math.random()*330);
 
      x = Index*10;
 
      cav.getContext('2d').fillText(text,x,y);
 
      wenn(y>Math.random()*1e4){
 
        yPositionen[index]=0;
 
      }anders{
 
        yPositionen[index]=y+10;
 
      }
 
    });
 
 
 
  }
 
  setInterval('zeichnen()',30);
 
</Skript>

 Verweise

https://www.cnblogs.com/fenger-VIP/p/7651562.html

Damit ist dieser Artikel über das Teilen von vier interessanten JS-Codes mit Hacker-Hintergrundeffekten abgeschlossen. Weitere verwandte Inhalte zu JS-Codes mit Hacker-Hintergrundeffekten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

JS Canvas realisiert dynamisch den Hintergrundeffekt von The Matrix
JS+CSS+HTML realisiert „Coderegen“, ähnlich dem fallenden Effekt von Text in The Matrix
HTML+JS realisiert den Quellcode des „Code Rain“-Effekts (den Matrix-Textfalleffekt)
JS realisiert den Effekt des fallenden Textes in The Matrix
js imitiert den Matrix-Buchstaben-Drop-Effekt-Code-Sharing

<<: SQL implementiert LeetCode (180. Fortlaufende Zahlen)

>>: Reines CSS, um die Textsymbolfunktion zu erreichen, indem das erste Zeichen der Zeichenfolge verwendet wird