【JQ+html+css】我的购物车-品优购（案例实现）

G_10nian

已于 2022-12-03 23:15:08 修改

阅读量1.5k

点赞数 1

文章标签： jquery html5 css3

于 2022-12-03 23:09:52 首次发布

本文链接：https://blog.csdn.net/G_10nian/article/details/128167539

版权

本文通过JQuery、HTML和CSS详细介绍了如何实现一个购物车功能，包括全选、单选背景、删除、清空购物车、商品数量增减及总价计算等核心操作。并提供了HTML、CSS和JQ的相关代码段。

摘要由CSDN通过智能技术生成

前言

图片两张自己另存

今天上课用jq做了个简单的购物车功能，其中核心功能有

1//全选
2//单选加商品背景
3//全选加商品背景
4//点击删除
5//删除选中商品
6//清空购物车
7//商品数量减
8//商品数量加
9//总价

的实现。接下来看代码。

一、HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description"
      content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <script src="js/jquery.min.js"></script>
	<script src="js/shopcar.js"></script>
  </head>
  <body>
    <div class="car-header">
      <div class="w">
        <div class="car-logo">
          <img src="img/logo.png" alt=""> <b>购物车</b>
        </div>
      </div>
    </div>
    </div>
    <div class="c-container">
      <div class="w">
        <div class="cart-filter-bar">
          <em>全部商品</em>
        </div>
        <!-- 购物车主要核心区域 -->
        <div class="cart-warp">
          <!-- 头部模块 -->
          <div class="cart-thead">
            <div class="t-checkbox">
              <input type="checkbox" name="" id="" class="checkall"> 全选
            </div>
            <div class="t-goods">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
          </div>
          <!-- 商品列表模块 -->
          <div class="cart-item-list">
            <div class="cart-item check-cart-item">
              <div class="p-checkbox">
                <input type="checkbox" checked class="j-checkbox">
              </div>
              <div class="p-goods">
                <div class="p-img">
                  <img src="upload/p1.jpg" alt="">
                </div>
                <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
              </div>
              <div class="p-price">￥12.60</div>
              <div class="p-num">
                <div class="quantity-form">
                  <a href="javascript:;" class="decrement">-</a>
                  <input type="text" class="itxt" value="1">
                  <a href="javascript:;" class="increment">+</a>
                </div>
              </div>
              <div class="p-sum">￥12.60</div>
              <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item">
              <div class="p-checkbox">
                <input type="checkbox" class="j-checkbox">
              </div>
              <div class="p-goods">
                <div class="p-img">
                  <img src="upload/p2.jpg" alt="">
                </div>
                <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童

最低0.47元/天解锁文章

G_10nian

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【JQ+html+css】我的购物车-品优购（案例实现）

图片两张自己另存今天上课用jq做了个简单的购物车功能，其中核心功能有1//全选 2//单选加商品背景 3//全选加商品背景 4//点击删除 5//删除选中商品 6//清空购物车 7//商品数量减 8//商品数量加 9//总价的实现。接下来看代码。二、CSS1、base.css2、car.css3、common.css三、JQ总结创建新的项目，注意引进的css名称，js的名称。目录文章目录前言一、HTML二、CSS三、JQ
复制链接

扫一扫