jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。 効果は以下のとおりです。 コードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="viewport" content="width=デバイス幅; initial-scale=1.0"> <title>jQuery 劇場座席選択および予約エフェクト コード</title> <meta name="keywords" content="jQuery,座席選択"> <スタイル タイプ="text/css"> .デモ{ 幅: 700ピクセル; マージン: 40px 自動 0 自動; 最小高さ: 450px; } @media スクリーンと (最大幅: 360px) { .デモ{ 幅: 340ピクセル } } 。フロント { 幅: 300ピクセル; マージン: 5px 32px 45px 32px; 背景色: #f0f0f0; 色: #666; テキスト配置: 中央; パディング: 3px; 境界線の半径: 5px; } .予約の詳細{ フロート: 右; 位置: 相対的; 幅: 200ピクセル; 高さ: 450px; } .予約詳細 h3 { マージン: 5px 5px 0 0; フォントサイズ: 16px; } .予約詳細 p { 行の高さ: 26px; フォントサイズ: 16px; 色: #999 } .booking-details p span { 色: #666 } div.seatChartsセル{ 色: #182C4E; 高さ: 25px; 幅: 25px; 行の高さ: 25px; マージン: 3px; フロート: 左; テキスト配置: 中央; アウトライン: なし; フォントサイズ: 13px; } div.seatCharts-シート { 色: #fff; カーソル: ポインタ; -webkit-border-radius: 5px; -moz-border-radius: 5px; 境界線の半径: 5px; } div.seatCharts行{ 高さ: 35px; } div.seatCharts-seat.available { 背景色: #B9DEA0; } div.seatCharts-seat.focused { 背景色: #76B474; 境界線: なし; } div.seatCharts-seat.selected { 背景色: #E6CAC4; } div.seatCharts-seat.unavailable { 背景色: #472B34; カーソル: 許可されていません。 } div.seatChartsコンテナ{ 右境界線: 1px 点線 #adadad; 幅: 400ピクセル; パディング: 20px; フロート: 左; } div.seatCharts-凡例 { 左パディング: 0px; 位置: 絶対; 下: 16px; } ul.seatCharts-凡例リスト { 左パディング: 0px; } .seatCharts-凡例アイテム { フロート: 左; 幅: 90ピクセル; 上マージン: 10px; 行の高さ: 2; } span.seatCharts-legendDescription { 左マージン: 5px; 行の高さ: 30px; } .チェックアウトボタン{ 表示: ブロック; 幅: 80ピクセル; 高さ: 24px; 行の高さ: 20px; マージン: 10px 自動; 境界線: 1px 実線 #999; フォントサイズ: 14px; カーソル: ポインタ } #選択された座席{ 最大高さ: 150px; オーバーフロー-y: 自動; オーバーフローx: なし; 幅: 200ピクセル; } #選択された座席 li { フロート: 左; 幅: 72px; 高さ: 26px; 行の高さ: 26px; 境界線: 1px 実線 #d3d3d3; 背景: #f7f7f7; マージン: 6px; フォントサイズ: 14px; フォントの太さ: 太字; テキスト配置: 中央 } </スタイル> </head> <本文> <div id="メイン"> <div class="demo"> <div id="座席マップ"> <div class="front">画面</div> </div> <div class="予約の詳細"> <p>映画: <span>インターステラー</span></p> <p>時間: <span>11月14日 21:00</span></p> <p>座席数:</p> <ul id="選択された座席"></ul> <p>投票数: <span id="counter">0</span></p> <p>合計: <b>¥<span id="total">0</span></b></p> <button class="checkout-button">購入を確認</button> <div id="凡例"></div> </div> <div style="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> <script type="text/javascript"> var price = 70; /*チケット価格*/ $(ドキュメント).ready(関数() { var $cart = $('#選択された座席'), /*座席エリア*/ $counter = $('#counter')、 /*投票数*/ $total = $('#total'); /*合計金額*/ var sc = $('#seat-map').seatCharts({ map: [ /* 座席表 */ 「ああああああ」、 「ああああああ」、 '__________'、 「ああああああ__」、 「ああああああ」、 「ああああああ」、 「ああああああ」、 「ああああああ」、 「ああああああ」、 「あああああ」 ]、 ネーミング: 上: 偽、 getLabel: 関数(文字、行、列) { 戻り列; } }, legend: { /*凡例を定義する*/ ノード: $('#legend'), アイテム: [ ['a', 'available', '空席'], ['a'、'入手不可'、'販売済み'] ] }, click: function() { /*クリックイベント*/ if (this.status() == 'available') { /*オプションの座席*/ $('<li>' + (this.settings.row + 1) + 'row' + this.settings.label + 'seat</li>') .attr('id', 'cart-item-' + this.settings.id) .data('seatId', this.settings.id) .appendTo($cart); $counter.text(sc.find('selected').length + 1); $total.text(合計(sc) + 価格を再計算します); '選択された' を返します。 } else if (this.status() == 'selected') { /*選択済み*/ /*数量を更新*/ $counter.text(sc.find('selected').length - 1); /*合計を更新*/ $total.text(合計(sc) - 価格を再計算します); /*予約席を削除*/ $('#cart-item-' + this.settings.id).remove(); /*オプションシート*/ 'available' を返します。 } else if (this.status() == 'unavailable') { /*販売済み*/ '利用不可' を返します。 } それ以外 { this.style() を返します。 } } }); /*販売済み席*/ 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('利用不可'); }); /*合計金額を計算します*/ 関数 recalculateTotal(sc) { var 合計 = 0; sc.find('selected').each(function() { 合計 += 価格; }); 合計を返します。 } </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法
>>: Nginx に React プロジェクトをデプロイする方法の例
vue+el-upload 複数ファイルの動的アップロード、参考までに具体的な内容は以下のとおりです...
今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...
目次アプリケーションシナリオ簡単に言えば、カスタム指示基本概念グローバルカスタマイズローカルカスタマ...
1. docker imagesを使用して、このマシン上のすべてのイメージファイルを表示します。 2...
1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...
mysql ユーザーを作成し、承認します。形式: 「ユーザー パスワード」で識別されるユーザー@ログ...
実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...
背景:サイトはフロントエンドとバックエンドから分離されています: vue+springbootフロン...
目次1. 応答原理の基盤2. コアオブジェクト: Dep と Watcher 3. 依存関係を収集し...
目次1. 親が子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに値を渡す3. 子コ...
この記事では主に、Vue + SpringBoot でページ分割されたリストデータを実装する方法を紹...
簡単に言うと、srcは「このリソースをロードしたい」という意味で、hrefは「このリソースに関連付け...
メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...
チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...