首页
所有分类
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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jquery插件实现搜索历史
Apr 24 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
南非购物网站(8) 比利时购物网站(33) 荷兰购物网站(99) 肯尼亚购物网站(2) 葡萄牙购物网站(13) 阿根廷购物网站(9) 瑞典购物网站(55) 芬兰购物网站(10) 挪威购物网站(7) 欧洲购物网站(15)
You might like
丧钟首部独立剧集《丧钟：骑士与龙》北美正式开播，场面血腥
2020/04/09 欧美动漫
PHP4中实现动态代理
2006/10/09 PHP
php+oracle 分页类
2006/10/09 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
python 线程的五个状态
2020/09/22 Python
Python 列表反转显示的四种方法
2020/11/16 Python
Yankee Candle官网：美国最畅销蜡烛品牌之一
2020/01/05 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
大学生英语演讲稿
2014/04/24 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
征求意见函
2015/06/05 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
python全面解析接口返回数据
2022/02/12 Python