コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語

ショッピングカート表示ページのJavaScript開発

このセクションでは、商品写真、商品内容の説明、商品数量の選択、商品単価

商品価格の小計、商品削除操作、商品合計価格の計算を表示するショッピングカート表示ページ

を作成します。 ️

内容: 選択された製品情報と操作合計価格を表示 はテーブルのヘッダーを表示し、 要素はテーブルの行を定義し、合計金額は下部の表の外側に表示されます。 このようにして、単純なショッピング カート ページの cart.php ファイルが作成されました。 学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <!--购物车样式表--> <style> h2{ text-align: center; } table{ margin: auto; width: 90%; border-color: inherit; } th{ color: white; font-weight: bold; font-family: 微软雅黑,宋体; } img{ height: 60%; display: block; margin: auto; } input{ text-align: center; font-weight: bold; } button{ font-weight: bold; font-size: 13px; } </style> </head> <body> <div class="container"> <h2>购物车</h2> <h3><a href="list.php">返回商品列表页面</a></h3> <table id="table" border="1" cellspacing="0" cellpadding="0" class="hide"> <thead> <tr style="background-color: #87adbf;"> <th> <input type="checkbox" id="allCheck" class="ck" />全选 </th> <th>图片</th> <th>描述</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <tr> <td><input type="checkbox" class="ck" /></td> <td> <img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" /> </td> <td>纯机械，超酷表带</td> <td> <button style="width:100%;"class="down">-</button> <input style="width:100%;" type="text" value="1" readonly="readonly" /> ​<button class="up">+</button> </td> <td>￥<span>3567</span></td> <td>￥<span>3567</span></td> <td><button class="del">删除</button></td> </tr> </tbody> </table> <div class="box" id="box"></div> <h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2> </div> </body> </html>
提出するリセットコード
前のセクション 次のセクション
チュートリアルリスト
ヘルプの取得
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜

このコースを視聴した生徒はこちらも学んでいます

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)  492411 回再生

<h2>を使用してショッピングカートのタイトルを定義します

<table> HTML テーブルを定義します。


要素は画像、説明、数量、小計、操作などを定義します。 tbody> テーブルのコンテンツ部分を表示します。 <tr><td> 要素はテーブルの単位を定義し、製品のコンテンツを表示します。

<button> タグを使用して「+」と「-」ボタンを作成し、真ん中の <input type="text"> を使用して数量を表示します。 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <!--购物车样式表-->
  <style>
    h2{
      text-align: center;
    }
    table{
      margin: auto;
      width: 90%;
      border-color: inherit;
    }
    th{
      color: white;
      font-weight: bold;
      font-family: 微软雅黑,宋体;
    }
    img{
      height: 60%;
      display: block;
      margin: auto;
    }
    input{
      text-align: center;
      font-weight: bold;
    }
    button{
      font-weight: bold;
      font-size: 13px;
    }
  </style>
</head>
<body>
<div class="container">
  <h2>购物车</h2>
  <h3><a href="list.php">返回商品列表页面</a></h3>
  <table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
    <thead>
    <tr style="background-color: #87adbf;">
      <th>
        <input type="checkbox" id="allCheck" class="ck" />全选
      </th>
      <th>图片</th>
      <th>描述</th>
      <th>数量</th>
      <th>单价</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
    <!--
    <tr>
      <td><input type="checkbox" class="ck" /></td>
      <td>
       <img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
      </td>
      <td>纯机械，超酷表带</td>
      <td>
       <button style="width:100%;"class="down">-</button>
       <input style="width:100%;" type="text" value="1" readonly="readonly" />
       <button class="up">+</button>
      </td>
      <td>￥<span>3567</span></td>
      <td>￥<span>3567</span></td>
      <td><button class="del">删除</button></td>
    </tr>
    -->
    </tbody>
  </table>
  <div class="box" id="box"></div>
  <h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2>
</div>
</body>
</html>