首页
所有分类
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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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
注解(1) HttpClient(1) Quartz(1) ip2region(1) dataBinding(1) RestTemplate(1) 反射(1) BottomSheetDialog(1) DeOldify(1) scrapy(1)
You might like
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
AngularJs 国际化（I18n/L10n）详解
2016/09/01 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
环法自行车赛官方商店：Le Tour de France
2017/08/27 全球购物
英国异国风情旅游网站：Travel Talk Tours（团体旅游、探险旅游、帆船假期）
2018/07/26 全球购物
美国最大和最受信任的二手轮胎商店：Bestusedtires.com
2020/06/02 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL
python playwright之元素定位示例详解
2022/07/23 Python