This article has shared the specific code for JS to implement the shopping cart function for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12."></script>
</head>
<body>
<div >
<button >My shopping cart</button><br><br>
<table >
<thead>
<tr>
<th>unit price</th>
<th>quantity</th>
<th>Subtotal</th>
<th>operate</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">Total amount of shopping cart：<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="#" rel="external nofollow" >&times;</a></td>'+
'</tr>');
$('#total').html( getTotal() );
});
//Bind the event listening function for the "delete" button (i.e., X number). Note: X is added later, and many X execution behavior is the same - use event proxy $('#cart tbody').delegate('td > a', 'click',function(event){
();
var a = ;
$(a).parent().parent().remove();
});
// Make event binding for the "Purchase Quantity" input box - use event proxy $('#cart tbody').delegate('td > input','change', function(event){
var input = ;
var count = ;
var price = $(input).parent().prev().html();
$(input).parent().next().html( price*count );
$('#total').html( getTotal() );
})
//Calculate the total amount of the shopping cart function getTotal(){
var sum = 0;
$('#cart tbody tr td:nth-child(3)').each(function(i, td){
sum += parseInt();
})
return sum;
}
function randPrice(){
var p = ()*100;
p = (2);
p = parseFloat(p);
return p;
}
function randCount() {
var c = (() * 10 + 1);
return c;
}
$('#header').load('php/');
$('#footer').load('php/');
var theme=('ChoseTheme');
applyTheme(theme)
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.