JavaScript로 장바구니를 개발하기 위한 장바구니 기능의 전체 코드

이 섹션에서는 JavaScript 개발 장바구니의 장바구니 기능에 대한 전체 코드를 보여줍니다.

저희가 생성한 4개의 JS 파일을 참조하여 장바구니의 모든 기능을 페이지에 완벽하게 구현했습니다.

상품 표시를 위한 list.php 파일, 쿠키 운영을 위한 cookie.js 파일, 목록 페이지 운영을 위한

index.js 파일, 로컬 데이터 모듈 운영을 위한 server.js 파일을 생성하였습니다.

cart.php 파일은 장바구니 페이지를 표시하고, cart.js 파일은 장바구니를 동작시킵니다.

완전한 상품 목록 페이지 list.php 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>商品列表页面</title>
  <!--商品列表样式表-->
  <style>
      h2{
        text-align: center;
      }
      a{
        text-decoration: none;
      }
      .mycar{
        border: 1px solid #d4d4d4;
        width: 160px;
        background-color: #d4d4d4;
        font-family: 微软雅黑,宋体;
      }
      dl{
        float: left;
        border: 1px solid #d4d4d4;
        margin-left: 10px;
        margin-top: 20px;
      }
      .m1{
        margin-left: 35%;
        font-family: 微软雅黑,宋体;
        font-size: 16px;
        font-weight: bolder;
        display: block;
      }
      .m2{
        font-size: 10px;
        color: #0000FF;
        margin-top: 3%;
        margin-left: 33%;
        display:block;
        line-height: 14px;
      }
      .m3{
        color: red;
        font-weight: bolder;
        font-size: 18px;
        display: block;
        line-height: 14px;
        text-align: left;
      }
      .m4{
        background-color: crimson;
        font-weight: bolder;
        color: white;
        display: block;
        line-height: 14px;
        margin-left: 30%;
      }
      @media only screen and (min-width: 410px){
        dl{
          margin: 20px 8px;
        }
      }
      @media only screen and (min-width: 350px) and (max-width: 410px){
        dl{
          margin: 20px 8px;
        }
      }
      }
      @media only screen and (max-width: 350px){
        dl{
          margin: 20px 8px;
        }
      }
  </style>
  <!--cookie操作的js库-->
  <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="container" >
  <h2>商品展示列表</h2>
  <div class="mycar">
    <a href="cart.php">我的购物车</a><i style="margin-left: 10px; color: red; font-weight: bolder;" id="ccount">0</i>
  </div>
  <div class="list">
    <dl pid="1001">
      <dt>
        <img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg"/>
      </dt>
      <dd class="m1">智能手表</dd>
      <dd class="m2">纯机械，超酷表带</dd>
      <dd class="m3">￥<span>3567</span></dd>
      <dd>
        <button class="m4">加入购物车</button>
      </dd>
    </dl>
    <dl pid="1002">
      <dt>
        <img src="https://img.php.cn/upload/course/000/000/008/58297f4735d73302.jpg" />
      </dt>
      <dd class="m1">智能手机</dd>
      <dd class="m2">大屏幕，超高配置</dd>
      <dd class="m3">￥<span>2999</span></dd>
      <dd>
        <button class="m4">添加购物车</button>
      </dd>
    </dl>
    <dl pid="1003">
      <dt>
        <img src="https://img.php.cn/upload/course/000/000/008/58298020ad204771.jpg" />
      </dt>
      <dd class="m1">平板电脑</dd>
      <dd class="m2">新上市，值得拥有</dd>
      <dd class="m3">￥<span>1899</span></dd>
      <dd>
        <button class="m4">添加购物车</button>
      </dd>
    </dl>
    <dl pid="1004">
      <dt>
        <img src="https://img.php.cn/upload/course/000/000/008/582980398200b667.jpg" />
      </dt>
      <dd class="m1">超极本</dd>
      <dd class="m2">够轻薄，够流畅</dd>
      <dd class="m3">￥<span>4999</span></dd>
      <dd>
        <button class="m4">添加购物车</button>
      </dd>
    </dl>
  </div>
</div>
<!--
    描述：数据访问层，操作本地数据的模块
-->
<script type="text/javascript" src="server.js"></script>
<!--
    描述：本页面的js操作
-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>

완전한 장바구니 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>
  <!--操作cookie的js文件-->
  <script type="text/javascript" src="cookie.js"></script>
</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 class="down">-</button><input 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>
<script src="server.js" type="text/javascript" charset="utf-8"></script>
<!--操作购物车页面的cart.js-->
<script src="cart.js"></script>
</body>
</html>

이와 같이 JavaScript 코드를 통해 기본 장바구니 기능을 구현합니다. 누구나 배움을 통해 다양한 시도를 할 수 있습니다.

이 코드는 친구들 간의 학습과 소통을 위한 것입니다.

지속적인 학습

새로운 파일

<!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>  <script type="text/javascript" src="cookie.js"></script> </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">  </tbody> </table> <div class="box" id="box"></div> <h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2> </div> <script src="server.js" type="text/javascript" charset="utf-8"></script>  <script src="cart.js"></script> </body> </html>

제출하다 코드 재설정

자동운전