장바구니 표시 페이지의 JavaScript 개발

이 섹션에서는 제품 사진, 제품 내용 설명, 제품 수량 선택, 제품 단가

제품 가격 소계, 제품 삭제 작업 및 총 제품 가격 계산을 표시하는 장바구니 표시 페이지

를 생성합니다.

제목 : 쇼핑카 转 점프 목록 페이지 사이드 헤드 : 사진, 설명, 단가, 선택사항, 기타 컨텐츠 등 다양한 정보 이름 표시 : 선택 제품 정보 및 운영 총 가격 표시 <tbody> 테이블 콘텐츠 부분을 표시합니다. <tr><td> 요소는 테이블 단위를 정의하고 제품 콘텐츠를 표시합니다. 총 가격은 하단 표 외부에 표시됩니다.

<!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>




<h2>를 사용하여 장바구니 제목을 정의하고 <table>을 사용하여 HTML 테이블을 정의합니다. <thead>는 테이블 헤더를 표시하고, <tr> 요소는 테이블 행을 정의하며, <th> 요소는 그림, 설명, 수량, 단가, 소계, 작업 등을 포함하는 테이블 헤더를 정의합니다.
<button> 태그를 사용하여 "+" 및 "-" 버튼을 만들고 중간에 <input type="text">를 사용하여 수량을 표시합니다.

이렇게 해서 간단한 장바구니 페이지 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>

제출하다 코드 재설정

자동운전