jQuery realisiert den Effekt der Sitzplatzauswahl und -reservierung im Theater

jQuery realisiert den Effekt der Sitzplatzauswahl und -reservierung im Theater. Zu Ihrer Information lautet der spezifische Inhalt wie folgt

Die Wirkung ist wie folgt:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="utf-8">
    <meta name="viewport" content="width=Gerätebreite; Anfangsmaßstab=1.0">
    <title>jQuery-Code für die Sitzplatzauswahl und Buchung im Kino</title>
    <meta name="keywords" content="jQuery,Sitzplatzauswahl">

    <style type="text/css">
        .demo {
            Breite: 700px;
            Rand: 40px auto 0 auto;
            Mindesthöhe: 450px;
        }
        
        @media screen und (max-width: 360px) {
            .demo {
                Breite: 340px
            }
        }
        
        .vorne {
            Breite: 300px;
            Rand: 5px 32px 45px 32px;
            Hintergrundfarbe: #f0f0f0;
            Farbe: #666;
            Textausrichtung: zentriert;
            Polsterung: 3px;
            Rahmenradius: 5px;
        }
        
        .Buchungsdetails {
            schweben: rechts;
            Position: relativ;
            Breite: 200px;
            Höhe: 450px;
        }
        
        .Buchungsdetails h3 {
            Rand: 5px 5px 0 0;
            Schriftgröße: 16px;
        }
        
        .Buchungsdetails p {
            Zeilenhöhe: 26px;
            Schriftgröße: 16px;
            Farbe: #999
        }
        
        .Buchungsdetails p span {
            Farbe: #666
        }
        
        div.seatCharts-Zelle {
            Farbe: #182C4E;
            Höhe: 25px;
            Breite: 25px;
            Zeilenhöhe: 25px;
            Rand: 3px;
            schweben: links;
            Textausrichtung: zentriert;
            Gliederung: keine;
            Schriftgröße: 13px;
        }
        
        div.seatCharts-seat {
            Farbe: #fff;
            Cursor: Zeiger;
            -Webkit-Randradius: 5px;
            -moz-Randradius: 5px;
            Rahmenradius: 5px;
        }
        
        div.seatCharts-row {
            Höhe: 35px;
        }
        
        div.seatCharts-seat.available {
            Hintergrundfarbe: #B9DEA0;
        }
        
        div.seatCharts-seat.fokussiert {
            Hintergrundfarbe: #76B474;
            Rand: keiner;
        }
        
        div.seatCharts-seat.selected {
            Hintergrundfarbe: #E6CAC4;
        }
        
        div.seatCharts-seat.unavailable {
            Hintergrundfarbe: #472B34;
            Cursor: nicht erlaubt;
        }
        
        div.seatCharts-container {
            Rahmen rechts: 1px gepunktet #adadad;
            Breite: 400px;
            Polsterung: 20px;
            schweben: links;
        }
        
        div.seatCharts-legend {
            Polsterung links: 0px;
            Position: absolut;
            unten: 16px;
        }
        
        ul.seatCharts-legendList {
            Polsterung links: 0px;
        }
        
        .seatCharts-legendItem {
            schweben: links;
            Breite: 90px;
            Rand oben: 10px;
            Zeilenhöhe: 2;
        }
        
        span.seatCharts-legendDescription {
            Rand links: 5px;
            Zeilenhöhe: 30px;
        }
        
        .Checkout-Button {
            Anzeige: Block;
            Breite: 80px;
            Höhe: 24px;
            Zeilenhöhe: 20px;
            Rand: 10px automatisch;
            Rand: 1px durchgezogen #999;
            Schriftgröße: 14px;
            Cursor: Zeiger
        }
        
        #ausgewählte-Sitze {
            maximale Höhe: 150px;
            Überlauf-y: automatisch;
            Überlauf-x: keiner;
            Breite: 200px;
        }
        
        #ausgewählte-Sitze li {
            schweben: links;
            Breite: 72px;
            Höhe: 26px;
            Zeilenhöhe: 26px;
            Rand: 1px durchgezogen #d3d3d3;
            Hintergrund: #f7f7f7;
            Rand: 6px;
            Schriftgröße: 14px;
            Schriftstärke: fett;
            Textausrichtung: zentriert
        }
    </Stil>

</Kopf>

<Text>


    <div id="Haupt">

        <div Klasse="Demo">
            <div id="Sitzplan">
                <div class="front">Bildschirm</div>
            </div>
            <div class="Buchungsdetails">
                <p>Film: <span>Interstellar</span></p>
                <p>Uhrzeit: <span>14. November, 21:00 Uhr</span></p>
                <p>Sitzplätze:</p>
                <ul id="ausgewählte-Sitze"></ul>
                <p>Stimmen: <span id="counter">0</span></p>
                <p>Gesamt: <b>￥<span id="total">0</span></b></p>

                <button class="checkout-button">Kauf bestätigen</button>

                <div id="legend"></div>
            </div>
            <div Stil="clear:both"></div>
        </div>

        <br />
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="jquery.seat-charts.min.js"></script>
    <Skripttyp="text/javascript">
        var Preis = 70; /*Ticketpreis*/
        $(Dokument).bereit(Funktion() {
            var $cart = $('#ausgewählte-Sitze'),
                /*Sitzbereich*/
                $Zähler = $('#Zähler'),
                /*Anzahl der Stimmen*/
                $total = $('#total'); /*Gesamtbetrag*/

            var sc = $('#seat-map').seatCharts({
                Karte: [ /* Sitzplan */
                    „aaaaaaaaaaa“,
                    „aaaaaaaaaaa“,
                    '__________',
                    'aaaaaaaa__',
                    „aaaaaaaaaaa“,
                    „aaaaaaaaaaa“,
                    „aaaaaaaaaaa“,
                    „aaaaaaaaaaa“,
                    „aaaaaaaaaaa“,
                    'aa__aa__aa'
                ],
                Benennung:
                    oben: falsch,
                    getLabel: Funktion (Zeichen, Zeile, Spalte) {
                        Rückgabespalte;
                    }
                },
                legend: { /*Legende definieren*/
                    Knoten: $('#legend'),
                    Artikel: [
                        ['a', 'available', 'Verfügbare Plätze'],
                        ['a', 'nicht verfügbar', 'verkauft']
                    ]
                },
                click: function() { /*Klickereignis*/
                    if (this.status() == 'verfügbar') { /*Optionaler Sitzplatz*/
                        $('<li>' + (diese.Einstellungen.Zeile + 1) + 'Zeile' + dieses.Einstellungen.Label + 'Sitz</li>')
                            .attr('id', 'Warenkorbartikel-' + diese.Einstellungen.id)
                            .data('Sitz-ID', diese.Einstellungen.ID)
                            .appendTo($cart);

                        $counter.text(sc.find('ausgewählt').Länge + 1);
                        $total.text(Total neu berechnen(sc) + Preis);

                        gibt „ausgewählt“ zurück;
                    } sonst wenn (this.status() == 'selected') { /*Ausgewählt*/
                        /*Menge aktualisieren*/
                        $counter.text(sc.find('ausgewählt').Länge - 1);
                        /*Gesamtsumme aktualisieren*/
                        $total.text(recalculateTotal(sc) - Preis);

                        /*Reservierte Plätze löschen*/
                        $('#cart-item-' + this.settings.id).remove();
                        /*Optionaler Sitzplatz*/
                        gib „verfügbar“ zurück;
                    } sonst wenn (this.status() == 'nicht verfügbar') { /*Verkauft*/
                        Rückgabewert „nicht verfügbar“;
                    } anders {
                        gib diesen Stil zurück();
                    }
                }
            });
            /*Verkaufte Plätze*/
            sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('nicht verfügbar');

        });
        /*Gesamtbetrag berechnen*/
        Funktion Gesamtsumme neu berechnen(sc) {
            var gesamt = 0;
            sc.find('ausgewählt').each(Funktion() {
                Gesamt += Preis;
            });

            Gesamtrendite;
        }
   
</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:

Online-Sitzplatzauswahl und -Reservierung auf Basis von jQuery realisieren - Kino
jQuery Online-Sitzplatzauswahl-Plug-in Sitzpläne Spezialeffekte Code-Sharing
Online-Sitzplatzauswahl basierend auf jQuery - Hochgeschwindigkeitszug-Version

<<: So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis

>>: Beispielmethode zum Bereitstellen eines React-Projekts auf Nginx