In einem Artikel erfahren Sie, wie Sie mit js den Sperrfeuereffekt erzielen

<Text>
    <div Klasse="con">
        <div id="Bildschirm">
            <div Klasse="dm_show">
                <!-- <div>Textnachricht</div> -->
            </div>
        </div>
        <div Klasse="Bearbeiten">
            <p Klasse="Nachricht">
                <input placeholder="Sag etwas?" class="content" type="text" />
            </p>
            <p Klasse="btns">
                <input type="button" class="send" value="Senden" />
                <input type="button" class="clear" value="Bildschirm löschen" />
            </p>
        </div>
    </div>
</body>

<Stil>
    .con {
        Hintergrundfarbe: Blumenweiß;
        Polsterung: 40px 80px 80px;
    }
 
    #Bildschirm {
        Hintergrundfarbe: #fff;
        Breite: 100 %;
        Höhe: 380px;
        Rand: 1px durchgezogenes RGB (229, 229, 229);
        Schriftgröße: 14px;
    }
 
    .Inhalt {
        Rand: 1px durchgezogenes RGB (204, 204, 204);
        Rahmenradius: 3px;
        Breite: 320px;
        Höhe: 35px;
        Schriftgröße: 14px;
        Rand oben: 30px;
    }
 
    .schicken {
        Rand: 1px durchgezogenes RGB (230, 80, 30);
        Farbe: rgb(230, 80, 0);
        Rahmenradius: 3px;
        Textausrichtung: zentriert;
        Polsterung: 0;
        Höhe: 35px;
        Zeilenhöhe: 35px;
        Schriftgröße: 14px;
        Breite: 159px;
        Hintergrundfarbe: weiß;
    }
 
    .klar {
        Rand: 1px durchgezogen;
        Farbe: dunkelgrau;
        Rahmenradius: 3px;
        Textausrichtung: zentriert;
        Polsterung: 0;
        Höhe: 35px;
        Zeilenhöhe: 35px;
        Schriftgröße: 14px;
        Breite: 159px;
        Hintergrundfarbe: weiß;
    }
 
    .bearbeiten {
        Rand: 20px;
        Textausrichtung: zentriert;
    }
 
    .bearbeiten .btns{
        Rand oben: 20px;
    }
 
    .edit .msg Eingabe{
        Polsterung links: 5px;
    }
 
    .text {
        Position: absolut;
    }
 
    * {
        Rand: 0;
        Polsterung: 0;
    }
 
    .dm_show {
        Rand: 30px;
    }
</Stil>

<Skript>
    $(Funktion () {
        //Legen Sie das Klickereignis der Schaltfläche „Senden“ fest, um den Bullet-Bildschirm auf der Bullet-Bildschirmwand anzuzeigen$('.send').click(function () {
            //Inhalt des Texteingabefelds abrufen var val = $('.content').val();
            //Nachdem der Inhalt des Textfelds val zugewiesen wurde, löschen Sie den Inhalt des Textfelds, damit der Benutzer ihn das nächste Mal eingeben kann$('.content').val('');
            //Umschließen Sie den Inhalt des Textfelds mit div für die nachfolgende Verarbeitung var $content = $('<div class="text">' + val + '</div>');
            //Holen Sie sich das Aufzählungsbildschirmobjekt $screen = $(document.getElementById("screen"));
            //Setzen Sie den oberen Rand, wenn der Aufzählungsbildschirm angezeigt wird, auf einen beliebigen Wert var top = Math.random() * $screen.height() + 40;
            //Oben und linken Rand des Bullet-Bildschirms festlegen $content.css({
                oben: oben + "px",
                links: 80
            });
            //Den Hauptteil des Bullet-Screens zur Bullet-Screen-Wand hinzufügen$('.dm_show').append($content);
            //Der Aufzählungsbildschirm bewegt sich 8 Sekunden lang von links nach rechts, dann lösche das Element direkt$content.animate({
                links: $screen.width() + 80 - $content.width()
            }, 8000, Funktion () {
                $(diese).entfernen();
            });
        });
        //Setze das Klickereignis „Bildschirm löschen“, um den gesamten Inhalt der Aufzählungsbildschirmwand zu löschen$('.clear').click(function () {
            $('.dm_show').empty();
        });
    });
</Skript>