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

Verstehen Sie kurz die MySQL-Datenbankoptimierungsphase

js zur Implementierung eines einfachen Bullet-Screen-Systems

Umsetzungsideen

Verstehen Sie kurz die MySQL-Datenbankoptimierungsphase

Implementierung der Docker-Container-Statuskonvertierung

Detaillierte Schritte zum Einrichten des Hosts Nginx + Docker WordPress Mysql

Vollständige Schritte zum Implementieren des Standort-Punch-Ins mithilfe räumlicher MySQL-Funktionen

Detailliertes grafisches Tutorial zur Installation und Deinstallation von Tomcat8 unter Linux

Detaillierter Prozess zur Konfiguration von NIS in Centos7

Spezifische Verwendung von Nginx Keepalive

mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()

Detaillierte Erläuterung der Vue + Axios-Anforderungsschnittstellenmethode und der Parameterübergabemethode

Kapselungsmethode der Vue-Breadcrumbs-Komponente

Artikel empfehlen

Tiefgreifendes Verständnis der logischen Architektur von MySQL

Zusammenfassung von 4 Lösungen zum Zurückgeben von Werten auf WeChat Mini-Programmseiten

Wie lädt Vue Dateien mit unterschiedlichem Ursprung basierend auf der URL herunter?

Ausführliche Erläuterung der Kenntnisse zu MySql-Tabellen, Datenbanken, Sharding und Partitionierung

Der einfachste Weg, ein Programm beim Start in Linux automatisch auszuführen

CSS verwendet die BEM-Namenskonvention

Strategie zur Optimierung der Leistung von MySQL-Datenbankabfragen

Beispiele zum Hinzufügen, Ändern, Löschen und Löschen von Werten in der MySQL-Datenbank

Datenstruktur - Baum (III): Mehrweg-Suchbaum B-Baum, B+ Baum

So führen Sie SQL-Anweisungen automatisch aus, wenn MySQL in Docker gestartet wird

Zusammenfassung einiger Vorschläge zum HTML-Code-Schreibstil

Detaillierte Erklärung zum dynamischen Aktivieren/Deaktivieren der Hyperthreading-Technologie in Linux

Detaillierte Erklärung der Komponentenkommunikation in React

MySQL-Datenbankdesign: Detaillierte Erläuterung der Schema-Operationsmethode mit Python

Erfahren Sie schnell, wie Sie mit der Vuex-Statusverwaltung in Vue3.0 beginnen