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:
|
<<: So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis
>>: Beispielmethode zum Bereitstellen eines React-Projekts auf Nginx
Artikel empfehlen
Vue+el-table realisiert das Zusammenführen von Zellen
In diesem Artikelbeispiel wird der spezifische Co...
Analyse allgemeiner Grundvorgänge der MySQL-Datenbank [Datenbank erstellen, anzeigen, ändern und löschen]
In diesem Artikel werden anhand von Beispielen di...
Zusammenfassung der Ausführungsprobleme zwischen MySQL Max und Where
Ausführungsproblem zwischen MySQL Max und Where S...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...
So öffnen Sie Port 8080 auf dem Alibaba Cloud ECS-Server
Aus Sicherheitsgründen verfügt Alibaba Cloud Serv...
Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys
Frage Nach dem Nginx-Reverse-Proxy erhält die Tom...
Detaillierte Verwendung des Kubernetes-Objektvolumens
Überblick Volume ist die Abstraktion und Virtuali...
Stapelweises Ersetzen eines Teils der Daten eines Felds in MySQL (empfohlen)
Stapelweises Ersetzen eines Teils der Daten eines...
Eine kurze Einführung in den allgemeinen Prozess der Web-Frontend-Webentwicklung
Ich sehe viele Anfänger in der Front-End-Entwicklu...
Fassen Sie die allgemeinen Eigenschaften von BigIn-Funktionen in JavaScript zusammen
Inhaltsverzeichnis 1. Übersicht 2. Attribute 1. M...
Detaillierte grafische Erklärung zum Einrichten von Routing und virtueller Maschinenvernetzung unter Linux
Was ist Routing? Unter Routing versteht man die Ü...
js zum Implementieren von Details im Datei-Upload-Stil
Inhaltsverzeichnis 1. Übersicht 2. Parameter zum ...
Detaillierter Prozess zum Erstellen von MongoDB und MySQL mit Docker-Compose
Schauen wir uns die detaillierte Methode zum Erst...
Vue-Beispielcode zur einfachen Implementierung von virtuellem Scrollen
Inhaltsverzeichnis Vorwort Rollprinzip erreichen ...
Tiefgreifendes Verständnis des Vue-Übergangs und der Animation
1. Wenn Sie DOM-Elemente einfügen, aktualisieren ...