Teilen Sie JS vier lustige Hacker-Hintergrundeffektcodes
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> Verweisehttps://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:
|
<<: SQL implementiert LeetCode (180. Fortlaufende Zahlen)
Artikel empfehlen
vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen
In der neuesten Version von WIN10 hat Microsoft e...
So installieren Sie die grafische Benutzeroberfläche unter Linux
1. Linux-Installation (Root-Benutzerbetrieb) 1. I...
Einige Dinge, die Sie über den Varchar-Typ in MySQL wissen sollten
Speicherregeln für varchar In Versionen unter 4.0...
Einfache Prinzipien für die Gestaltung des Webseiten-Layouts
Dieser Artikel fasst einige einfache Prinzipien d...
Lösung für das Problem, dass eine Linux-Änderung der MySQL-Konfiguration nicht wirksam wird
Hintergrund Ich habe einen Projektdienst, der AWS...
Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt
1. Grundlegende Verwendung <!DOCTYPE html> ...
Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen
Der Container wurde bereits erstellt. So erfahren...
So verwenden Sie den Nginx-Proxy zum Surfen im Internet
Normalerweise verwende ich nginx als Reverse-Prox...
MySQL 8.x MSI-Version Installations-Tutorial mit Bildern und Text
1. MySQL herunterladen Offizielle Website-Downloa...
Nginx erstellt Implementierungscode für RTMP-Liveserver
1. Erstellen Sie ein neues RTMP-Verzeichnis im Ng...
Implementierung des Wasserfall-Layouts im Uni-App-Projekt
GitHub-Adresse, Sie können es mit einem Stern mar...
Zusammenfassung einiger Vorschläge zum HTML-Code-Schreibstil
Das Protokoll der Ressourcendatei weglassen Es wi...
Der Unterschied zwischen redundanten und doppelten Indizes in MySQL
MySQL ermöglicht das Erstellen mehrerer Indizes f...
Zusammenfassung des Betriebs und der Wartung von Linux von grundlegenden bis zu fortgeschrittenen Wissenspunkten
Die Arbeit als Betriebs- und Wartungsingenieur is...
Erklärung der Funktionsweise und Verwendung von Redux
Inhaltsverzeichnis 1. Was ist Redux? 2. Das Redux...