溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

基于JavaScript實(shí)現(xiàn)購(gòu)物車功能

發(fā)布時(shí)間：2020-09-16 04:11:58 來(lái)源：腳本之家 閱讀：175 作者：醬果子 欄目：web開(kāi)發(fā)

本文實(shí)例為大家分享了js實(shí)現(xiàn)購(gòu)物車功能的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="shop">
  <button id="btAdd">我的購(gòu)物車</button><br><br>

  <table id="cart">
    <thead>
    <tr>
      <th>單價(jià)</th>
      <th>數(shù)量</th>
      <th>小計(jì)</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
    <tfoot>
    <tr>
      <td colspan="4">購(gòu)物車總金額：<span id="total">0.00</span></td>
    </tr>
    </tfoot>
  </table>
</div>
<div id="footer"></div>
<script>
  $('#read .page li a').click(function(){
    var n=$(this).html();

    $(this).parent().parent().next().children('p:nth-child('+n+')').slideDown(2000);
    $(this).parent().parent().next().children('p:nth-child('+n+')').siblings().css('display','none');
  })

  $('#btAdd').click(function(){
    var p = randPrice();
    var c = randCount();
    $('#cart tbody').append('<tr>'+
      '<td>'+p+'</td>'+
      '<td><input type="text" value="'+c+'"></td>'+
      '<td>'+parseFloat((p*c).toFixed(2))+'</td>'+
      '<td><a href="#" rel="external nofollow" >&times;</a></td>'+
      '</tr>');
    $('#total').html( getTotal() );
  });

  //為“刪除”按鈕(即X號(hào))綁定事件監(jiān)聽(tīng)函數(shù)，注意：X是后添加的，很多X執(zhí)行的行為是一樣的——使用事件代理
  $('#cart tbody').delegate('td > a', 'click',function(event){
    event.preventDefault();
    var a = event.target;
    $(a).parent().parent().remove();

  });
  //為“購(gòu)買數(shù)量”輸入框做事件綁定——使用事件代理
  $('#cart tbody').delegate('td > input','change', function(event){

    var input = event.target;
    var count = input.value;
    var price = $(input).parent().prev().html();
    $(input).parent().next().html( price*count );
    $('#total').html( getTotal() );
  })
  //計(jì)算購(gòu)物車的總金額
  function getTotal(){
    var sum = 0;
    $('#cart tbody tr td:nth-child(3)').each(function(i, td){
      sum += parseInt(td.innerHTML);
    })
    return sum;
  }


  function randPrice(){
    var p = Math.random()*100;
    p = p.toFixed(2);
    p = parseFloat(p);
    return p;
  }
  function randCount() {
    var c = Math.floor(Math.random() * 10 + 1);
    return c;

  }
  $('#header').load('php/header.php');
  $('#footer').load('php/footer.php');
  var theme=localStorage.getItem('ChoseTheme');
  applyTheme(theme)

</script>

</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手