基于JavaScript实现购物车功能

更新时间：2020-04-21 00:40:55 作者：startmvc

本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下<!DOCTYPEh

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。