基于JavaScript实现购物车功能
本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> <scriptsrc="js/jquery-1.12.4.js"></script> </head> <body> <divid="shop"> <buttonid="btAdd">我的购物车</button><br><br> <tableid="cart"> <thead> <tr> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <tdcolspan="4">购物车总金额:<spanid="total">0.00</span></td> </tr> </tfoot> </table> </div> <divid="footer"></div> <script> $('#read.pagelia').click(function(){ varn=$(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(){ varp=randPrice(); varc=randCount(); $('#carttbody').append('<tr>'+ '<td>'+p+'</td>'+ '<td><inputtype="text"value="'+c+'"></td>'+ '<td>'+parseFloat((p*c).toFixed(2))+'</td>'+ '<td><ahref="#"rel="externalnofollow">×</a></td>'+ '</tr>'); $('#total').html(getTotal()); }); //为“删除”按钮(即X号)绑定事件监听函数,注意:X是后添加的,很多X执行的行为是一样的——使用事件代理 $('#carttbody').delegate('td>a','click',function(event){ event.preventDefault(); vara=event.target; $(a).parent().parent().remove(); }); //为“购买数量”输入框做事件绑定——使用事件代理 $('#carttbody').delegate('td>input','change',function(event){ varinput=event.target; varcount=input.value; varprice=$(input).parent().prev().html(); $(input).parent().next().html(price*count); $('#total').html(getTotal()); }) //计算购物车的总金额 functiongetTotal(){ varsum=0; $('#carttbodytrtd:nth-child(3)').each(function(i,td){ sum+=parseInt(td.innerHTML); }) returnsum; } functionrandPrice(){ varp=Math.random()*100; p=p.toFixed(2); p=parseFloat(p); returnp; } functionrandCount(){ varc=Math.floor(Math.random()*10+1); returnc; } $('#header').load('php/header.php'); $('#footer').load('php/footer.php'); vartheme=localStorage.getItem('ChoseTheme'); applyTheme(theme) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。