Web前端开发与设计13-购物车案例

说明

使用js脚本实现商品的添加、修改、删除、价格计算。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript实现购物车功能</title>
    <style type="text/css">
        .num {
            width: 30px;
        }
    </style>
    <!--入jquery-->
    <script src="script/jquery-1.12.4.js"></script>
    <script>
        //1.实现全选的效果
        function checkAll() {
            let eles = document.getElementsByName("product");//获取的是对象集合
            //console.log(eles);//调试代码
            for (let i = 0; i < eles.length; i++) {
                eles[i].checked = document.getElementById("checkall").checked;
            }
        }

        //2.实现选择商品改变全选框的效果
        function checkProduct() {
            let ckall = document.getElementById("checkall");//全选框
            let eles = document.getElementsByName("product");//获取商品选框对象集合
            let size = eles.length;//商品数目
            let total = 0;//选中的商品数目

            //遍历集合,判断商品是否都被选中
            for (let i = 0; i < size; i++) {
                if (eles[i].checked == false) {
                    ckall.checked = false;
                    break;//中断循环
                } else {
                    total += 1;
                }
            }
            //判断是否已经遍历完成
            if (total == size) {
                ckall.checked = true;
            }
        }

        //jquery开发环境
        $(function () {
            //alert("hello jquey!");
            //3.实现增加商品数量
            $("#mycart").find(".add").click(function () {
                let $_pre = $(this).prev();
                //console.log($_pre);
                let num = parseInt($_pre.val());
                //alert(num);
                $_pre.val(num + 1);//数量+1

                //改变小计金额
                let price=$_pre.parent().prev().text();//读取价格
                $_pre.parent().next().text(parseInt(price)*(num+1));
                totalPrice();

            })

            //4.减少商品数量
            $("#mycart").find(".sub").click(function () {
                let $_next = $(this).next();
                let num = parseInt($_next.val());
                if (num < 2) {
                    let result = confirm("确定删除该商品?");
                    if (result == true) {
                        $_next.parent().parent().remove();//删除商品
                        totalPrice();
                    }
                } else {
                    $_next.val(num - 1);//数量-1
                    //改变小计金额
                    let price=$_next.parent().prev().text();//读取价格
                    $_next.parent().next().text(parseInt(price)*(num-1));
                    totalPrice();
                }
            })

            //5.增加商品效果
            $("#addProduct").click(function () {
                let $_newRow =$("#mycart").find("tr").eq(1).clone(true);
                $("#mycart").find("tr").eq(1).after($_newRow);
                totalPrice();
            })

            //6.总计价格
            function totalPrice() {
                var sum=0;
                $(".total").each(function (i,e) {
                    sum+=parseInt($(e).text());
                })
                $("#sum").text(sum);

            }

            //执行计算总价
            totalPrice();
        })
    </script>
</head>
<body>
<button id="addProduct">增加商品</button>
<hr>
<table id="mycart" border="1px">
    <tr>
        <th>全选<input type="checkbox" id="checkall" onclick="checkAll()"></th>
        <th>品名</th>
        <th>价格</th>
        <th>数量</th>
        <th>小计</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="product" onclick="checkProduct()"></td>
        <td>衣服</td>
        <td>800</td>
        <td>
            <button class="sub">-</button>
            <input type="text" name="num" class="num" value="1">
            <button class="add">+</button>
        </td>
        <td class="total">800</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="product" onclick="checkProduct()"></td>
        <td>鞋子</td>
        <td>500</td>
        <td>
            <button class="sub">-</button>
            <input type="text" name="num" class="num" value="1">
            <button class="add">+</button>
        </td>
        <td  class="total">500</td>
    </tr>
    <tr>
        <td colspan="3">总计</td>
        <td colspan="2" id="sum">888</td>
    </tr>
</table>

</body>
</html>

  

原文地址:https://www.cnblogs.com/rask/p/12501706.html

时间: 2024-10-06 17:04:15

Web前端开发与设计13-购物车案例的相关文章

Web前端开发与设计02-表单

学习要点 表单 表单的高级应用 语义化的表单 表单的初步验证 表单 定义 表单在网页中应用广泛,例如:登陆.注册.订单信息录入.调查问卷.搜索等等.例如京东注册页面. 常见的表单元素:文本框,密码框,下来列表框,多选框,提交按钮等等.语法: <form method="post" action="result.html"> <p> 名字:<input name="name" type="text"

Web前端开发与设计06-JavaScript基础

学习要点 JavaScript核心语法 JavaScript程序调试 JavaScript函数 为什么学习JavaScript 应用场景 嵌入动态文本于HTML页面,对浏览器事件做出响应. 读写HTML元素. 在数据被提交到服务器之前验证数据. 检测访客的浏览器信息. 控制cookies,包括创建和修改等. 基于Node.js技术进行服务器端编程. 本次课程应用之一:表单验证 本次课程应用之二:页面动态效果 JavaScript简介 javascript的发展历程 Netscape(网景)公司在

Web前端开发与设计08-JavaScript操作DOM对象

学习要点 DOM分类 DOM节点间关系 访问DOM节点 节点的创建.添加.删除.替换 设置元素的样式 获取节点位置属性 DOM模型 DOM定义 DOM Core:W3C针对XML文档的操作规范.适用于XML和HTML. HTML-DOM:W3C针对HTML文档的操作规范.只适用于HTML. CSS-DOM:操作CSS的DOM,把style属性封装成对象进行操作. DOM结构 节点间的关系主要有:根节点.父节点.子节点.节点属性.节点value值和节点文本内容. 访问节点 getElement方法

Web前端开发与设计09-jQuery基础及其基本选择器

学习要点 jQuery概述 jQuery语法 DOM对象和jQuery对象 jQuery选择器概述 通过css选择器选取元素 通过条件过滤选取元素 jQuery概述 简介 jQuery由美国人John Resig于2006年创建. jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装. 它的设计思想是write less,do more. 初识jQuery 1.JavaScript如何实现表格的隔行变色? javascirpt实现代码: Window.

Web前端开发与设计10-jQuery中的事件和动画

学习要点 jQuery中的事件 jQuery中的动画 网页中的事件 网页中的事件是实现和用户交互的基础. 例如tab页切换效果,可以通过鼠标点击事件来实现. jQuery中的事件 jQuery事件是对JavaScript事件的封装,常用事件分类如下: 基础事件 window事件 鼠标事件 键盘事件 表单事件 复合事件是多个事件的组合 鼠标光标悬停 鼠标连续点击 鼠标事件 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有: 以mouseover()为例,实现鼠标移过时特效: 键

web前端开发浅析

原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里,在web2.0时代,扮演着极其重要的角色,它是RIA时代的幕后推手,同时,也是数字媒体技术的应用之一.   关键词:数字媒体技术:web开发:前端开发,网页重构 什么是前端技术  前端技术包括JavaScript.ActionScript.CSS.xHTML等"传统"技术与Adobe R

web前端开发与页面设计的协作、区别与发展

web前端开发与页面设计的协作.区别与发展,布布扣,bubuko.com

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习

WEB前端开发成长指南

小 编注:相比起网页射击狮,操纵代码的前端攻城狮凭着双手在键盘巴拉巴拉敲出的字符,就能赋予二次元的静态页面生命,各种lovely 的~~fabulous的~~elegant的交互效果,那叫一个锦上添花哈~~不过,要修炼成一个百战百胜的攻城狮,那是得从基本的 JavaScript开始,一点一滴积累hacking技能.日前小编在茫茫信息汪洋里瞟到这神级干货,本着你好我好大家好的精神,怎能收着掖着不分享 叻?想成为一只威武的攻城狮的各位,马上开啃吧~~O(∩_∩)O [背景] 如果你是刚进入web前端