这篇文章主要为大家详细介绍了基于 JavaScript 实现购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
来源: http://www.phperz.com/article/17/0512/327950.html