2. 程式人生 > 程式設計 >jquery製作的移動端購物車效果完整示例

jquery製作的移動端購物車效果完整示例

阿新 • • 發佈：2020-02-26

本文例項講述了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>
    </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="jquery製作的移動端購物車效果完整示例">
        <p>首頁</p>
      </li><li>
        <img src="shop/fenlei.jpg" alt="jquery製作的移動端購物車效果完整示例">
        <p>分類</p>
      </li><li>
        <img src="shop/shouye.jpg" alt="jquery製作的移動端購物車效果完整示例">
        <p>吃飯吧</p>
      </li><li>
        <img src="shop/car.jpg" alt="jquery製作的移動端購物車效果完整示例">
        <p>購物車</p>
      </li><li>
        <img src="shop/shouye.jpg" alt="jquery製作的移動端購物車效果完整示例">
        <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擴充套件技巧總結》、《jQuery常用外掛及用法總結》、《jQuery表格(table)操作技巧彙總》、《jquery中Ajax用法總結》、《jQuery常見經典特效彙總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。

相關推薦

jquery製作的移動端購物車效果完整示例

本文例項講述了jquery製作的移動端購物車效果。分享給大家供大家參考，具體如下：

php+pdo實現的購物車類完整示例

本文例項講述了php+pdo實現的購物車類。分享給大家供大家參考，具體如下： <?php

JS實現TITLE懸停長久顯示效果完整示例

本文例項講述了JS實現TITLE懸停長久顯示效果。分享給大家供大家參考，具體如下：

jQuery實現移動端圖片上傳預覽元件的方法分析

本文例項講述了jQuery實現移動端圖片上傳預覽元件的方法。分享給大家供大家參考，具體如下：

jQuery實現移動端筆觸canvas電子簽名

本文例項為大家分享了jQuery實現移動端筆觸canvas電子簽名的具體程式碼，供大家參考，具體內容如下

jQuery實現的分頁外掛完整示例

本文例項講述了jQuery實現的分頁外掛。分享給大家供大家參考，具體如下： 呈現

jQuery實現移動端下拉展現新的內容回彈動畫

jQuery移動端下拉展現新的內容動畫回彈，供大家參考，具體內容如下 jquery的方法,寫的比較細,可以改成原生的這裡就不做修改了,話不多說上程式碼,也可以改成下拉重新整理

jQuery實現移動端扭蛋機抽獎

本文例項為大家分享了jQuery實現移動端扭蛋機抽獎的具體程式碼，供大家參考，具體內容如下

jQuery實現的移動端圖片縮放功能元件示例

本文例項講述了jQuery實現的移動端圖片縮放功能元件。分享給大家供大家參考，具體如下：

js實現移動端吸頂效果

今天來簡單的寫一個吸頂，供大家參考，具體內容如下 先羅列一下吸頂需要使用到的屬性

js實現適配移動端的拖動效果

本文例項為大家分享了js實現適配移動端的拖動效果，供大家參考，具體內容如下

react實現移動端下拉選單的示例程式碼

前言 專案中要實現類似與vant的DropdownMenu:下拉選單。看了vans 的效果 其實也沒什麼難度，於是動手魯了一個這樣的元件。

node.js使用http模組建立伺服器和客戶端完整示例

本文例項講述了node.js使用http模組建立伺服器和客戶端。分享給大家供大家參考，具體如下：

JavaScript實現移動端帶transition動畫的輪播效果

JavaScript實現輪播的方式多種多樣，桌面的移動端的實現方式都是大同小異的，具體的核心實現原理不外乎下面幾個要點。即：

javascript實現移動端 HTML5 圖片上傳預覽和壓縮功能示例

本文例項講述了javascript實現移動端 HTML5 圖片上傳預覽和壓縮功能。分享給大家供大家參考，具體如下：

Unity shader實現移動端模擬深度水效果

本文例項為大家分享了Unity shader實現移動端模擬深度水的具體程式碼，供大家參考，具體內容如下

jQuery實現倒計時功能完整示例

本文例項講述了jQuery實現倒計時功能。分享給大家供大家參考，具體如下： demo程式碼：

Jquery滑動門/tab切換實現方法完整示例

本文例項講述了Jquery滑動門/tab切換實現方法。分享給大家供大家參考，具體如下：

vue移動端滑動刪除效果

<div class=\"container\"> <ul> <li class=\"list-item2\" v-for=\"(item,index) in list \" data-type=\"0\" :key=\"index\">

vue.js移動端app實戰3：從一個購物車入門vuex

序開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。