<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/js/jquery-1.12.4.js"></script> </head> <body> <div> <button>我的购物车</button><br><br> <table> <thead> <tr> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <td colspan="4">购物车总金额：<span>0.00</span></td> </tr> </tfoot> </table> </div> <div></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="#" >×</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>
基于JavaScript实现购物车功能
内容版权声明：除非注明，否则皆为本站原创文章。