当秋风吹过黄昏,树叶洒落了一地,透过树干间的缝隙,有一抹夕阳,在绽放他最后的美丽……
本文实例为大家分享了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 rel="nofollow noopener noreferrer" 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>
到此这篇关于基于JavaScript实现购物车功能就介绍到这了。气质是一个人独特的风貎,是从眼神、说话、举手投足之间流露出的特质,是一个人在涵养或修养的外在体现。气质看不着,但一举手、一投足、一张嘴就展现得淋漓尽致。美只是愉悦眼睛,而气质的优雅使人心入迷。气质是一个人最好看的样子。更多相关基于JavaScript实现购物车功能内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!