js zur Implementierung eines einfachen Bullet-Screen-Systems
|
In diesem Artikel wird der spezifische Code von nativem js zur Erzielung des Sperreffekts als Referenz freigegeben. Der spezifische Inhalt ist wie folgt Umsetzungsideen1. Schreiben Sie zuerst das statische Seiten-Framework
<div id='Vater'>
<div id="oben">
<video src="./video/s10_2020129112346.mp4" steuert die automatische Wiedergabe einer stummgeschalteten Schleife></video>
<!-- controls zeigt die Standard-Videosteuerung an. Autoplay-Video wird automatisch abgespielt (nur wenn das Stummschaltattribut gesetzt ist, kann es automatisch abgespielt werden).
stummgeschaltet lautlose Wiedergabe Schleife Schleifenwiedergabe -->
</div>
<div id="unten">
<Eingabetyp="text" id="txt">
<input type="button" id="btn" value="Senden">
</div>
</div>2. Fügen Sie einfachen CSS-Code hinzu, um die Seite schöner zu machen
*{
/*Seiteninitialisierung*/
Rand: 0;
Polsterung: 0;
}
Körper{
Hintergrundfarbe: Burlywood;
}
#Vater{
Breite: 800px;
Höhe: 550px;
Rand: 50px automatisch;
}
#Spitze{
Breite: 800px;
Höhe: 500px;
}
Video{
Breite: 800px;
Höhe: 500px;
}
#unten{
Breite: 800px;
Höhe: 50px;
Hintergrundfarbe: #000;
Textausrichtung: zentriert;
Zeilenhöhe: 50px;
}So eine einfache statische Seite ist fertig, den Rest müssen wir nur noch mit dem JS-Code schreiben. 3. Lassen Sie uns einige Funktionen für die spätere Verwendung kapseln.
//Zufällig eine Farbfunktion generieren rgb () {
sei r = Math.floor(Math.random() * 256);
sei g = Math.floor(Math.random() * 256);
sei b = Math.floor(Math.random() * 256);
gibt 'rgb('+r+','+g+','+b+')' zurück
}
//Generiere Ganzzahlen im angegebenen Bereich function stochastic(max,min){
gibt Math.floor(Math.random()*(max-min)+min) zurück;
}Die von uns gesendeten Aufzählungskommentare werden im Span -Tag platziert. Hier müssen wir die Positionierung verwenden, um den Span in #top zu platzieren (Sohn und Vater befinden sich an derselben Position).
//Span-Tag zur Funktion <div id='#top'></div> hinzufügen barrage(){
let span = document.createElement("span");
span.innerHTML = txt.Wert;
span.style.color = rgb(); //Aufzählungszeichenfarbe span.style.fontSize = stochastic(50,12) + 'px'; //Schriftgröße span.style.top = stochastic(420,0) + 'px'; //Position rechts = -2000
span.style.right = right + 'px' //Der Abstand von rechts tops.appendChild(span); //Span-Tag zu <div id='#top'></div> hinzufügen //Timer verwenden, um die Bewegung des Bullet-Screens zu realisieren let tiem = setInterval(()=>{
richtig++;
span.style.right = rechts + 'px'
wenn( rechts > 800 ) {
tops.removeChild(span); //Wenn der Bullet-Screen aus dem Video herausrutscht, zerstöre das Element direkt clearInterval(tiem); //Schalte den Timer aus}
},10)//Wenn Ihnen die Geschwindigkeit zu langsam ist, können Sie sie hier anpassen}4. Nachdem die Funktion nun gekapselt ist, nennen wir sie
let btn = document.getElementById('btn');
//Füge der Schaltfläche ein Klickereignis hinzu btn.onclick = ()=>{
if(txt.value=='') return; //Wenn die Benutzereingabe leer ist, kehre direkt zu barrage() zurück;
txt.value = ''; // Eingabefeld löschen}
//Ein Tastatur-Abhörereignis hinzufügen (Eingabe)
document.addEventListener('Taste gedrückt', Funktion (e) {
wenn (e.keyCode == 13) {
wenn(txt.value=='') zurückgeben;
Sperrfeuer();
txt.Wert = '';
}
});Fügen Sie abschließend alle Codes an. Ich hoffe, das wird Ihnen weiterhelfen.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>JS-Sperrfeuereffekt</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Hintergrundfarbe: Burlywood;
}
#Vater{
Breite: 800px;
Höhe: 550px;
Rand: 50px automatisch;
}
#Spitze{
Breite: 800px;
Höhe: 500px;
Position: relativ;
Überlauf:versteckt; /*Überlauf versteckt*/
}
Video{
Breite: 800px;
Höhe: 500px;
object-fit:fill; /*An Höhe und Breite des angegebenen Containers anpassen*/
}
#unten{
Breite: 800px;
Höhe: 50px;
Hintergrundfarbe: #000;
Textausrichtung: zentriert;
Zeilenhöhe: 50px;
}
Spanne{
Position: absolut;
rechts: 0;
oben: 0;
}
</Stil>
</Kopf>
<Text>
<div id='Vater'>
<div id="oben">
<video src="./video/s10_2020129112346.mp4" steuert die automatische Wiedergabe einer stummgeschalteten Schleife></video>
</div>
<div id="unten">
<Eingabetyp="text" id="txt">
<input type="button" id="btn" value="Senden">
</div>
</div>
<Skript>
Geben Sie txt ein und geben Sie txt ein.
let btn = document.getElementById('btn');
let tops = document.getElementById('top');
//Füge der Schaltfläche ein Klickereignis hinzu btn.onclick = ()=>{
if(txt.value=='') return; //Wenn die Benutzereingabe leer ist, kehre direkt zu barrage() zurück;
txt.value = ''; // Eingabefeld löschen}
//Ein Tastatur-Abhörereignis hinzufügen (Eingabe)
document.addEventListener('Taste gedrückt', Funktion (e) {
wenn (e.keyCode == 13) {
if(txt.value=='') return; //Wenn die Benutzereingabe leer ist, kehre direkt zu barrage() zurück;
txt.value = ''; // Eingabefeld löschen}
});
//Zufällig eine Farbfunktion generieren rgb () {
sei r = Math.floor(Math.random() * 256);
sei g = Math.floor(Math.random() * 256);
sei b = Math.floor(Math.random() * 256);
gibt 'rgb('+r+','+g+','+b+')' zurück
}
//Generiere Ganzzahlen im angegebenen Bereich function stochastic(max,min){
gibt Math.floor(Math.random()*(max-min)+min) zurück;
}
//Span-Tag zur Funktion <div id='#top'></div> hinzufügen barrage(){
let span = document.createElement("span");
span.innerHTML = txt.Wert;
span.style.color = rgb();
span.style.fontSize = stochastisch(50,12) + "px";
span.style.top = stochastisch(420,0) + "px";
span.style.right = -200 + "px";
tops.appendChild(span);
rechts lassen = -200;
lass timem = setInterval(()=>{
richtig++;
span.style.right = rechts + 'px'
wenn( rechts > 800 ) {
tops.removeChild(span); //Wenn der Bullet-Screen aus dem Video herauskommt, zerstöre das Element clearInterval(tiem); //Schalte den Timer aus}
},10)//Wenn Ihnen die Geschwindigkeit zu langsam ist, können Sie sie hier anpassen}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung zur Verwendung der Linux-Umleitung
Artikel empfehlen
Detaillierte Erläuterung der Vue-Lebenszyklusfunktionen
Inhaltsverzeichnis Lebenszyklusfunktionen Allgeme...
Detaillierte Erklärung zur Lösung des Problems zu langer Inhalte in CSS
Wenn wir CSS schreiben, vergessen wir manchmal di...
So installieren Sie RabbitMQ schnell in Docker
1. Holen Sie sich das Bild #Geben Sie die Version...
Erstellen Sie eine Scala-Umgebung unter Linux und schreiben Sie ein einfaches Scala-Programm
Es ist sehr einfach, eine Scala-Umgebung in Linux...
Detaillierte Erklärung zur Verwendung der benutzerdefinierten Vue-Baumsteuerung
In diesem Artikel erfahren Sie, wie Sie das benut...
Detailliertes Tutorial zur Installation von Anaconda3 auf Ubuntu 18.04
Anaconda bezeichnet eine Open-Source-Python-Distr...
Tutorial zur manuellen Installation und Konfiguration von mysql8.0.11 winx64
Lassen Sie mich zunächst über meinen Alltag sprec...
Ubuntu kompiliert Kernelmodule und der Inhalt wird im Systemprotokoll angezeigt
Inhaltsverzeichnis 1.Linux-Anmeldeschnittstelle 2...
Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen
Heute bin ich etwas verwirrt über <a href="...
Die Bedeutung der 5 Leerzeichenarten in HTML
HTML bietet fünf Leerzeichen mit unterschiedliche...
MySQL nutzt geschickt Summe, Groß- und Kleinschreibung und Wann, um statistische Abfragen zu optimieren
Ich habe kürzlich in der Firma an einem Projekt g...
Lösung für das Problem, dass der Docker-Container nicht gestoppt werden kann
Die Lösung lautet wie folgt: 1. Container löschen...
Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS
Dieser Artikel vergleicht und fasst vier Möglichk...
Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate
(I) Installation von mysql5.7: ❀ Details: Die Ins...
Eine kurze Diskussion zum Erstellen eines Clusters in nodejs
Inhaltsverzeichnis Cluster-Cluster Clusterdetails...