js zur Implementierung eines einfachen Bullet-Screen-Systems

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

Umsetzungsideen

1. 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:
  • Einfache Implementierung des JavaScript-Bullet-Screen-Effekts
  • Realisierung von Bullet-Screen-Spezialeffekten auf Basis von JavaScript
  • Beispiel für einen mit JS implementierten Video-Bullet-Screen-Effekt
  • JavaScript Live-Kommentar Barrage Bild ausschneiden Funktion Punkt Sammlung Effekt Code
  • JavaScript zum Erzielen eines Bullet-Screen-Wall-Effekts
  • JavaScript zum Erzielen eines Video-Sperreffekts (zwei Versionen)
  • Natives js, um Sperrfeuereffekt zu erzielen
  • js cavans realisiert einen statisch scrollenden Bullet-Screen
  • Eine einfache Anleitung zur Implementierung von Bullet-Screen-Effekten mit nativem JS
  • js, um einen Bullet-Screen-Flugzeugeffekt zu erzielen

<<:  Detaillierte Erklärung zur Verwendung der Linux-Umleitung

>>:  Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 8.0.21

Artikel empfehlen

HTML implementiert problemlos abgerundete Rechtecke

Frage: Wie erreiche ich mit Div+CSS und Positioni...

Super ausführliches Tutorial zur Installation und Konfiguration von MySQL8.0.22

Hallo zusammen, heute lernen wir die Installation...

Zusammenfassung verschiedener Methoden zur JS-Datentyperkennung

Inhaltsverzeichnis Hintergrund Welche Methoden gi...

Detaillierte Verwendung von Echarts in vue2 vue3

Inhaltsverzeichnis 1. Installation 2. Verwenden S...

Centos7.5 Konfiguration Java-Umgebung Installation Tomcat Erklärung

Tomcat ist eine auf Java basierende Webserversoft...

Über die Überlappung von Randwert und vertikalem Rand in CSS

Rand paralleler Boxen (Überlappung doppelter Ränd...

MySql8 WITH RECURSIVE rekursive Abfrage Eltern-Kind-Sammlungsmethode

Hintergrund Wenn Sie eine Funktion entwickeln, di...

Ein Artikel, der Ihnen hilft, die Positionsberechnung in js gründlich zu verstehen

Inhaltsverzeichnis Einführung scrollen Element.sc...

Lösung für das 404-Problem der Tomcat-Installation in Docker

Suchen Sie die Container-ID von Tomcat und rufen ...

Analyse des Unterschieds zwischen „Platzieren auf“ und „Wo“ in MySQL-Abfragebedingungen

Einführung Beim Schreiben von SQL bin ich heute a...

Teilen Sie 20 JavaScript-Einzeilencodes

Inhaltsverzeichnis 1. Holen Sie sich den Wert des...

4 flexible SCSS-Kompilierungsausgabestile

Vielen Leuten wird das Kompilieren erklärt, sobal...

So setzen Sie das MySQL-Root-Passwort zurück

Inhaltsverzeichnis 1. Ich habe das Root-Passwort ...

So verwenden Sie Bind zum Einrichten eines DNS-Servers

DNS (Domain Name Server) ist ein Server, der Domä...

Detaillierte Erläuterung der Verwendung des in Nodejs integrierten Verschlüsselungsmoduls zur Peer-to-Peer-Verschlüsselung und -Entschlüsselung

Verschlüsselung und Entschlüsselung sind wichtige...