首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jquery制作的移动端购物车效果完整示例

Posted in jQuery onFebruary 24, 2020

本文实例讲述了jquery制作的移动端购物车效果。分享给大家供大家参考，具体如下：

jquery制作的移动端购物车效果完整示例

html部分

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物详情</title>
<link rel="stylesheet" href="index.css" rel="external nofollow" >
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
  <header>
    <h3>全场满100元包邮,还差<span>100</span>元包邮</h3>
  </header>
  <div class="main">
    <ul class="main_shop">
      <li class="shop_list">
        <div class="checked">
          <div class= "checks"></div>
        </div>
        <div class="content">
          <div class="content_top">
            <div class="img">
              <img src="shop/9288714270450521_300.jpg" alt="苹果快速购买">
            </div>
            <div class="text">
              <div class="tit">
                <p>江南脐橙20个160g以上/个</p>
                <div></div>
              </div>
              <div class="down"> 直降</div>
              <div class="price">
                <div class="price_left">
                <span>￥</span><span class="mon">50</span><span>￥75.9</span>
                </div>
                <div class="price_right">
                  <div class="mrnus">-</div>
                  <div class="cont">0</div>
                  <div class="add">+</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content_bottom">
            <p>满减<span>满一件,即享受16.9元优惠</span></p>
          </div>
        </div>
      </li>
      <li class="shop_list">
        <div class="checked">
          <div class="checks"></div>
        </div>
        <div class="content">
          <div class="content_top">
            <div class="img">
              <img src="shop/9288714270450521_300.jpg" alt="苹果快速购买">
            </div>
            <div class="text">
              <div class="tit">
                <p>江南脐橙20个160g以上/个</p>
                <div></div>
              </div>
              <div class="down"> 直降</div>
              <div class="price">
                <div class="price_left">
                  <span>￥</span><span class="mon">50</span><span>￥75.9</span>
                </div>
                <div class="price_right">
                  <div class="mrnus">-</div>
                  <div class="cont">0</div>
                  <div class="add">+</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content_bottom">
            <p>满减<span>满一件,即享受16.9元优惠</span></p>
          </div>
        </div>
      </li>
      <li class="shop_list">
        <div class="checked">
          <div class="checks"></div>
        </div>
        <div class="content">
          <div class="content_top">
            <div class="img">
              <img src="shop/9288714270450521_300.jpg" alt="苹果快速购买">
            </div>
            <div class="text">
              <div class="tit">
                <p>江南脐橙20个160g以上/个</p>
                <div></div>
              </div>
              <div class="down"> 直降</div>
              <div class="price">
                <div class="price_left">
                  <span>￥</span><span class="mon">50</span><span>￥75.9</span>
                </div>
                <div class="price_right">
                  <div class="mrnus">-</div>
                  <div class="cont">0</div>
                  <div class="add">+</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content_bottom">
            <p>满减<span>满一件,即享受16.9元优惠</span></p>
          </div>
        </div>
      </li>
      <li class="shop_list">
        <div class="checked">
          <div class="checks"></div>
        </div>
        <div class="content">
          <div class="content_top">
            <div class="img">
              <img src="shop/9288714270450521_300.jpg" alt="苹果快速购买">
            </div>
            <div class="text">
              <div class="tit">
                <p>江南脐橙20个160g以上/个</p>
                <div></div>
              </div>
              <div class="down"> 直降</div>
              <div class="price">
                <div class="price_left">
                  <span>￥</span><span class="mon">50</span><span>￥75.9</span>
                </div>
                <div class="price_right">
                  <div class="mrnus">-</div>
                  <div class="cont">0</div>
                  <div class="add">+</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content_bottom">
            <p>满减<span>满一件,即享受16.9元优惠</span></p>
          </div>
        </div>
      </li>
      <li class="shop_list">
        <div class="checked">
          <div class="checks"></div>
        </div>
        <div class="content">
          <div class="content_top">
            <div class="img">
              <img src="shop/9288714270450521_300.jpg" alt="苹果快速购买">
            </div>
            <div class="text">
              <div class="tit">
                <p>江南脐橙20个160g以上/个</p>
                <div></div>
              </div>
              <div class="down"> 直降</div>
              <div class="price">
                <div class="price_left">
                  <span>￥</span><span class="mon">50</span><span>￥75.9</span>
                </div>
                <div class="price_right">
                  <div class="mrnus">-</div>
                  <div class="cont">0</div>
                  <div class="add">+</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content_bottom">
            <p>满减<span>满一件,即享受16.9元优惠</span></p>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="car">
    <div class="car_left">
      <div id="quan" index = "0"></div>全选
    </div>
    <div class="car_right">
      <div class="te">
        <p>合计：<span> ￥</span><span id="money">0.00</span></p>
          <p>已经惠<span>￥0.00</span></p>
      </div>
      <div class="btn">
        去结算(<span>0</span>)
      </div>
    </div>
  </div>
  <footer>
    <ul>
      <li>
        <img src="shop/shouye.jpg" alt="">
        <p>首页</p>
      </li><li>
        <img src="shop/fenlei.jpg" alt="">
        <p>分类</p>
      </li><li>
        <img src="shop/shouye.jpg" alt="">
        <p>吃饭吧</p>
      </li><li>
        <img src="shop/car.jpg" alt="">
        <p>购物车</p>
      </li><li>
        <img src="shop/shouye.jpg" alt="">
        <p>我的</p>
      </li>
    </ul>
  </footer>
</body>
</html>
<script src="jquery.js"></script>
<script src="index.js"></script>

js

<script src="jquery.js"></script>  文件自行下载 版本11

index.js：

$(function () {
  $(".mrnus").click(function () {
    shopAdd($(this));
    che();
  })
  $(".add").click(function () {
    shopAdd($(this));
    che();
  })
  $(".checks").click(function(){
    checked($(this));
    che();
  })
  $("#quan").click(function() {
    quan();
  })
})
function shopAdd(obj) {
  // console.log(obj)
  if(obj.html() == "+"){
    // alert("jia")
    let num = parseInt(obj.prev().html());
    num++;
    obj.prev().html(num);
    // 改变价格
    // 判断是否选中
    if (obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html() !=""){
      let pricr = parseInt(obj.parent().prev().find(".mon").html());
      // console.log(pricr);
      let money = parseInt($("#money").html());
      money += pricr;
      // console.log(price)
      $("#money").html(money);
    }
  } else if (obj.html() == "-"){
    // alert("j")
    let num = parseInt(obj.next().html());
    num--;
    if(num <= 0){
      num = 0;
      // return;
    }
    obj.next().html(num);
    // 改变价格
    // 判断是否选中
    if (obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html() != "") {
      let price2 = parseInt(obj.parent().prev().find(".mon").html());
      // console.log(pricr);
      let money = parseInt($("#money").html());
      money -= price2;
      // console.log(price)
      $("#money").html(money);
    }
  }
}
// 选择
function checked(checks) {
  // console.log(checks.html())
  if (checks.html() == ""){
    checks.css({"background":"red"})
    checks.html("√");
    money(checks);
  }else{
    checks.css("background","white")
    checks.html("");
    money(checks,1);
  }
}
function money(obj,x){
  // alert(obj)
  let price = parseInt(obj.parent().parent().find(".mon").html());
  let content = parseInt(obj.parent().next().find(".cont").html());
  // console.log(content)
  if(x != null){
    price *= -1 ;
  }
  let money= parseInt($("#money").html());
  money += price * content;
  // console.log(price)
  $("#money").html(money);
}
function che(){
  let ches = $(".checks");
  // console.log(ches.size())
}
function quan() {
  if($("#quan").attr("index") == 0){
    $("#quan").attr("index","1")
    $(".checks").css({ "background": "red" })
    $(".checks").html("√");
    $("#quan").css({ "background": "red" })
    $("#quan").html("√");
    $(".btn span").html("11")
  }else{
    $("#quan").attr("index", "0")
    $(".checks").css({ "background": "white" })
    $(".checks").html("");
    $("#quan").css({ "background": "white" })
    $("#quan").html("");
    $(".btn span").html("0")
  }
}

css

@charset "utf-8";
*{
 margin:0;
 padding:0;
}
html{
 font-size:22.67vw;
 /* font-family: "黑体"; */
}
html,body{
 height: 100%;
 background-color: #f4f4f4;
}
body{
 height: 100%;
 background-color: #f4f4f4;
 font-family:"微软雅黑";
 display: -webkit-flex;
 flex-direction: column;
}
a{
 text-decoration:none;
}
ul,ol{
 list-style:none;
}
img{
 border:0;
 display: block;
}
header{
 background: #fff9eb;
 height: 0.4rem;
 font-size: 12px;
 padding-left: .1rem;
 display: flex;
 align-items: center;
 border-bottom: 1px solid #ffd6a0;
}
header h3{
 font-weight: normal;
}
header h3 span{
 color: #ff695a;
}
/* main--------------------------*/
.main{
 display: flex;
 flex:1;
 overflow: auto;
 margin-top: .1rem;
 background: #ffffff;
}
.main_shop{
 width: 100%;
 flex-direction: column;
}
.shop_list{
 width: 100%;
 height: 1.3rem;
 border-bottom:1px solid #dddddd;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.checked{
 width: 10%;
 height: 100%;
}
.checked div{
 width: 0.17rem;
 height: 0.17rem;
 border:1px solid #cdcdcd;
 border-radius: 50%;
 margin-top: .43rem;
 margin-left: .1rem;
 font-size: 12px;
 color: white;
 text-align: center;
 line-height: .17rem;
}
.content{
 flex: 1;
 height: 100%;
}
.content_top{
 width:100%;
 height: 1rem;
 display: flex;
}
.img , img{
 width: .75rem;
 height: 100%;
}
.text{
 flex: 1;
 height: 100%;
 font-size: 12px;
 padding-right:.16rem;
 padding-left: .15rem;
}
.tit{
 display: flex;
 align-items: center;
 justify-content: space-between;
 height:.38rem;
}
.tit p{
 font-size: .15rem;
 color:#333333;
}
.tit div{
 width:.15rem;
 height: .17rem;
 background: url("shop/remove.jpg");
 background-size: cover;
}
.down{
 height: 0.17rem;
 width: 0.41rem;
 color: #11b57c;
 border:2px solid #11b57c;
 border-radius: .08rem;
 text-align: center;
 line-height: .17rem;
 margin-top: .11rem;
}
.price{
 display: flex;
 height: .3rem;
 align-items: center;
 justify-content: space-between;
 font-size: .12rem;
 font-weight: 900;
}
.price_left span:first-child{
 color: #ff695a;
 display:inline-block;
 margin-right: 5px;
}
.mon{
 color: #ff695a;
 display:inline-block;
 margin-right: 5px;
}
.price_left span:last-child{
 color: #cecece;
}
.price_right{
 display: flex;
 justify-content: space-around;
 align-items: center;
 width: .77rem;
 height: .22rem;
 border:1px solid #dddddd;
 border-radius: 5px;
}
.price_right div{
 flex:1;
 text-align: center;
}
.price_right div:nth-child(2){
 border-right: 1px solid #dddddd;
 border-left: 1px solid #dddddd;
}
.content_bottom{
 width:100%;
 height: .3rem;
 border-top: 1px solid #dddddd;
 display:flex;
 justify-content: flex-start;
 align-items: center;
}
.content_bottom p{
 font-size: .13rem;
 color:#808080;
 font-weight: 800;
}
.content_bottom p span{
 font-size: .13rem;
 color:#cccccc;
 padding-left: 10px;
}
/* car */
.car{
 height: 0.48rem;
 width: 100%;
 border-top: 1px solid #d5d5d5;
 background: #fff;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 12px;
}
.car_left{
 height: 100%;
 display: flex;
 align-items: center;
}
.car_left div{
  width: 0.17rem;
  height: 0.17rem;
  border: 1px solid #cdcdcd;
  border-radius: 50%;
  margin-left: .1rem;
  text-align: center;
 line-height: .17rem;
 margin-right: 10px;
}
.car_right{
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 100%;
}
.te p:first-child{
 font-size: 12px;
 font-weight: 900;
}
.te p:first-child span{
 color: #ff6353;
}
.btn{
 width: 1.1rem;
 height:100%;
 background:#ff6353;
 color:white;
 font-size: .17rem;
 text-align: center;
 line-height: .5rem;
}
.te p:last-child span{
 color: #999999;
}
/* footer 999999*/
footer{
 height: 0.48rem;
 width: 100%;
 border-top: 2px solid #d5d5d5;
 background: #fff;
}
footer ul{
 display: flex;
 justify-content: space-around;
 align-items: center;
 margin-top:6px;
}
footer ul li{
 font-size: 12px;
 color:#8d8a8a;
}
footer ul li img{
 width: 0.25rem;
 height: 0.22rem;
}

希望本文所述对大家jQuery程序设计有所帮助。

jquery制作的移动端购物车效果完整示例

- Author -

巴啦啦小能量

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
jquery向后台提交数组的代码分析
Feb 20 #jQuery
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
jQuery实现简易QQ聊天框
Feb 10 #jQuery
jQuery实现简单聊天室
Feb 08 #jQuery
欧洲购物网站(15) 瑞典购物网站(55) 葡萄牙购物网站(13) 阿根廷购物网站(9) 荷兰购物网站(99) 南非购物网站(8) 芬兰购物网站(10) 肯尼亚购物网站(2) 挪威购物网站(7) 比利时购物网站(33)
You might like
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
js计算精度问题小结
2013/04/22 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
js给selected添加options的方法
2015/05/06 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
法国低价在线宠物商店：bitiba.fr
2020/07/03 全球购物
static全局变量与普通的全局变量有什么区别？static局部变量和普通局部变量有什么区别？static函数与普通函数有什么区别？
2015/02/22 面试题
解释一下Windows的消息机制
2014/01/30 面试题
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
如何进行Linux分区优化
2013/02/12 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
决心书标准格式
2014/03/11 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2015年材料员工作总结
2015/04/30 职场文书
欠条范文
2015/07/03 职场文书
个人房屋租赁合同（标准范本）
2019/09/16 职场文书