首页
所有分类
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 01 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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) 东芝(1) ICF-7600(1) 索尼(5) 天线(6) 德劲(5) PL-880(1) SONY(15) TOSHIBA(1) RP-F11(1)
You might like
配置支持SSI
2006/11/25 PHP
php面向对象全攻略 （三）特殊的引用“$this”的使用
2009/09/30 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
VUE预渲染及遇到的坑
2018/09/03 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Python变量赋值的秘密分享
2018/04/03 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python中six模块基础用法
2019/12/08 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
大都会艺术博物馆商店：The Met Store
2018/06/22 全球购物
质检部岗位职责
2013/11/11 职场文书
小学教师师德反思
2014/02/03 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
大学军训通讯稿（2016最新版）
2015/12/21 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书