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
Erläutern Sie das Binlog-Protokoll von MySQL und wie Sie das Binlog-Protokoll zum Wiederherstellen von Daten verwenden
Wie wir alle wissen, sind Binlog-Protokolle für M...
So öffnen Sie Ports zur Außenwelt in Alibaba Cloud Centos7.X
Kurz gesagt: Wenn Sie einen Cloud-Server eines be...
Einführung, Installation und Verwendung von Hyper-V (detaillierte Abbildungen)
Vorwort: Als Gigant in der IT-Branche ist Microso...
2 Methoden und Vorsichtsmaßnahmen zum Hinzufügen von Skripten in HTML
So fügen Sie ein <script>-Skript in HTML ein...
JavaScript implementiert einfache Datumseffekte
Der spezifische Code der JavaScript-Datumseffekte...
jQuery erzielt Vollbild-Scrolling-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
Implementierungscode der Funktion zur Benutzervorschauzeitüberwachung der Vue-Seite
In einem aktuellen Unternehmen besteht die Anford...
Implementierung der Docker-Bereitstellung von Tomcat- und Webanwendungen
1. Docker online herunterladen yum install -y epe...
Kenntnisse zur Überwachung der MySQL-Indexnutzung (es lohnt sich, sie zu erwerben!)
Überblick In einer relationalen Datenbank ist ein...
Vue implementiert die Bottom-Query-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Ausführliche Erläuterung der HTML-Grundlagen (Teil 2)
1. Liste Der Listen-UL- Container wird mit einer ...
Eine detaillierte Einführung in die Linux-Systemkonfiguration (Dienststeuerung)
Inhaltsverzeichnis Vorwort 1. Systemdienststeueru...
Detaillierte Analyse der MySQL-Indexdatenstruktur
Inhaltsverzeichnis Überblick Indexdatenstruktur B...
In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt
Ich möchte eine Frage stellen. Ich habe in Dreamw...
Eine kurze Erläuterung der Anzeigemodi von HTML-Tags (Tags auf Blockebene, Inline-Tags, Inline-Block-Tags)
Während der heutigen Vorlesung habe ich über den ...