本文實例為大家分享了js實現購物車功能的具體代碼，供大家參考，具體內容如下
<!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">我的購物車</button><br><br> <table id="cart"> <thead> <tr> <th>單價</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <td colspan="4">購物車總金額：<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" >×</a></td>'+ '</tr>'); $('#total').html( getTotal() ); }); //為“刪除”按鈕(即X號)綁定事件監聽函數，注意：X是后添加的，很多X執行的行為是一樣的――使用事件代理 $('#cart tbody').delegate('td > a', 'click',function(event){ event.preventDefault(); var a = event.target; $(a).parent().parent().remove(); }); //為“購買數量”輸入框做事件綁定――使用事件代理 $('#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() ); }) //計算購物車的總金額 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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
