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
jQuery verwendet die Funktionen hide() und toggle(), um die Funktion zum Ausblenden der Kameramarkenanzeige zu realisieren
Als ich kürzlich jQuery lernte, stieß ich auf die...
img usemap Attribut China Karte Link
HTML-img-Tag: definiert ein Bild, das in eine Webs...
So verwenden Sie den regulären Matching-Selektor für CSS-Attributwerte (Tipps)
Es gibt drei Typen von regulären Matching-Selekto...
Die perfekte Lösung für Vue-Routing-Fallback (vue-route-manager)
Inhaltsverzeichnis Routenplaner Hintergrund Erste...
Detaillierte Erläuterung der Mysql-Funktionsaufrufoptimierung
Inhaltsverzeichnis Funktionsaufrufoptimierung Fun...
So installieren Sie ELK in Docker und implementieren die Protokollanalyse im JSON-Format
Was ist ELK? ELK ist ein vollständiger Satz von L...
So zählen Sie die Anzahl bestimmter Zeichen in einer Datei unter Linux
Das Zählen der Nummer einer Zeichenfolge in einer...
So generieren Sie Zufallszahlen mit angegebenen Ziffern in MySQL und so generieren Sie Zufallszahlen in Stapeln
1. Stellen Sie zunächst einige häufig verwendete ...
Implementierung von dynamischem REM für mobiles Layout
Dynamische REM 1. Lassen Sie uns zunächst die akt...
Mit JS ein kleines Flugzeugkriegsspiel implementieren
In diesem Artikelbeispiel wird der spezifische JS...
Lassen Sie uns ausführlich über die LIMIT-Anweisung in MySQL sprechen
Inhaltsverzeichnis Frage Serverebene und Speicher...
Welche Wissenssysteme brauchen Webdesigner?
Produktdesigner sind mit komplexen und großen Fert...
So öffnen Sie externe Netzwerkzugriffsrechte für MySQL
Wie unten dargestellt: Führen Sie hauptsächlich A...
So kapseln Sie Paging-Komponenten manuell in Vue3.0
In diesem Artikel wird der spezifische Code der m...
So stellen Sie versehentlich gelöschte Tabellendaten in MySQL wieder her (unbedingt lesen)
Wenn ein Backup vorhanden ist, ist es ganz einfac...