JavaScript开发购物车之购物车功能完整代码

本节展示JavaScript开发购物车之购物车功能完整代码。

通过引用我们创建好的4个JS文件,在页面中完整的实现购物车的各项功能。

我们创建了list.php文件用来进行商品展示,cookie.js文件操作cookie,

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代码我们就实现了基本的购物车功能。大家可以通过学习进行各种尝试。

本代码仅供朋友们学习交流使用。

Weiter lernen
||
<!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>
einreichenCode zurücksetzen