jQuery简易的购物车

最新推荐文章于 2023-10-18 20:27:02 发布
最新推荐文章于 2023-10-18 20:27:02 发布
阅读量123 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48221244/article/details/119256157
版权

jQuery 初级项目 购物车 商品管理 数量控制
关键词由CSDN通过智能技术生成

大家好，我是曜耀。

今天，发一jQuery初学者写的小项目。

废话不说，上代码：

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>增减购物车商品信息 </title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        * {
            font-size: 12px;
        }
    </style>

</head>

<body>
    <table border="1" cellpadding="0" cellspacing="0" >
        <tr>
            <th><input type='checkbox' class="alll" onclick="allselect(this)"/>全选</th>
            <th>商品信息</th>
            <th>宜美惠价</th>
            <th>数量</th>
            <th>操作</th>

        </tr>

        <tr class="tr_0">
            <td>
                <input name="ssss" type="checkbox" value="" class="aa1" />
            </td>
            <td><img src="images/sang.gif" class="products" /><a href="#">天堂雨伞</a></td>
            <td>￥32.9元</td>
            <td>
                <input type="button" value="-" onclick="jian(this)">
                <input type="text" class="quantity" value="1" />
                <input type="button" value="+" onclick="jia(this)">
            </td>
            <td>
                <input type="button" value="删除" onclick="del(this)" class="dela">
            </td>
        </tr>
        <tr class="tr_1">
            <td>
                <input name="ssss" type="checkbox" value="" class="aa2" />
            </td>
            <td>
                <img src="images/iphone.gif" class="products" /><a href="#">苹果手机iphone5</a>
            </td>
            <td>￥3339元
            </td>
            <td>
                <input type="button" value="-" onclick="jiana(this)">
                <input type="text" class="quantitya" value="1" />
                <input type="button" value="+" onclick="jiaa(this)">
            </td>
            <td>
                <input type="button" value="删除" onclick="dela(this)" class="delb">

            </td>
        </tr>

    </table>

    <input type="button" value="添加" onclick="add(this)">
    <input type="button" value="删除" onclick="delss(this)">
</body>

<script>

    //减一数量
    function jian(params) {

        var shulaing = $('.quantity').val();

        var jiange = 32.9;

        if (shulaing > 0) {

            shulaing -= 1;
            var zongjia = shulaing * jiange;
            var zhong = Number(zongjia).toFixed(2);
            console.log("这是数量");
            console.log(jiange);
            console.log(shulaing);

            console.log(zongjia);
            $('.tr_0').children().eq(2).text(zhong);

            $('.quantity').val(shulaing);

        } else {

            $('.tr_0').children().eq(2).text("0");


        }








    }
    //加一数量
    function jia(params) {

        var shulaing = $('.quantity').val();

        var jiange = 32.9;

        if (shulaing >= 0) {

            var shu = parseInt(shulaing) + 1;
            var zongjia = shu * jiange;
            var zhong = Number(zongjia).toFixed(2);

            console.log(zongjia);
            $('.tr_0').children().eq(2).text(zhong);

            $('.quantity').val(shu);

        } else {

            $('.tr_0').children().eq(2).text("0");


        }








    }

    function del(params) {

        $('.dela').parent().parent().remove();



    }
    //减一数量
    function jiana(params) {

        var shulaing = $('.quantitya').val();

        var jiange = 3339;

        if (shulaing > 0) {

            shulaing -= 1;
            var zongjia = shulaing * jiange;
            var zhong = Number(zongjia).toFixed(2);
            console.log("这是数量");
            console.log(jiange);
            console.log(shulaing);

            console.log(zongjia);
            $('.tr_1').children().eq(2).text(zhong);

            $('.quantitya').val(shulaing);

        } else {

            $('.tr_1').children().eq(2).text("0");


        }








    }
    //加一数量
    function jiaa(params) {

        var shulaing = $('.quantitya').val();

        var jiange = 3339;

        if (shulaing >= 0) {

            var shu = parseInt(shulaing) + 1;
            var zongjia = shu * jiange;
            var zhong = Number(zongjia).toFixed(2);
            console.log("这是数量");
            console.log(jiange);
            console.log(shulaing);

            console.log(zongjia);
            $('.tr_1').children().eq(2).text(zhong);

            $('.quantitya').val(shu);

        } else {

            $('.tr_1').children().eq(2).text("0");


        }








    }

    function dela(params) {

        $('.delb').parent().parent().remove();



    }

    function add(params) {

        $('.aa1').prop("checked");
        if ($('.aa1').prop("checked")) {
            var shulaing = $('.quantity').val();

            var jiange = 32.9;

            if (shulaing >= 0) {

                var shu = parseInt(shulaing) + 1;
                var zongjia = shu * jiange;
                var zhong = Number(zongjia).toFixed(2);


                console.log(zongjia);
                $('.tr_0').children().eq(2).text(zhong);

                $('.quantity').val(shu);

            } else {

                $('.tr_0').children().eq(2).text("0");


            }


        }
        $('.aa2').prop("checked");
        if ($('.aa2').prop("checked")) {
            var shulaing = $('.quantitya').val();

            var jiange = 3339;

            if (shulaing >= 0) {

                var shu = parseInt(shulaing) + 1;
                var zongjia = shu * jiange;
                var zhong = Number(zongjia).toFixed(2);


                console.log(zongjia);
                $('.tr_1').children().eq(2).text(zhong);

                $('.quantitya').val(shu);

            } else {

                $('.tr_1').children().eq(2).text("0");


            }


        }


    }
    function delss(params) {

        $('.aa1').prop("checked");
        if ($('.aa1').prop("checked")) {
            var shulaing = $('.quantity').val();

            var jiange = 32.9;

            if (shulaing >= 0) {

                var shu = parseInt(shulaing) - 1;
                var zongjia = shu * jiange;
                var zhong = Number(zongjia).toFixed(2);


                console.log(zongjia);
                $('.tr_0').children().eq(2).text(zhong);

                $('.quantity').val(shu);

            } else {

                $('.tr_0').children().eq(2).text("0");


            }


        }
        $('.aa2').prop("checked");
        if ($('.aa2').prop("checked")) {
            var shulaing = $('.quantitya').val();

            var jiange = 3339;

            if (shulaing >= 0) {

                var shu = parseInt(shulaing) -1;
                var zongjia = shu * jiange;
                var zhong = Number(zongjia).toFixed(2);


                console.log(zongjia);
                $('.tr_1').children().eq(2).text(zhong);

                $('.quantitya').val(shu);

            } else {

                $('.tr_1').children().eq(2).text("0");


            }


        }


    }
    //全选
    function allselect(params) {
        // $('.alll').prop("checked");

        // console.log($('.alll').prop("checked"));

        // if ($('.alll').prop("checked")) {

        //     $("input :checkbox").attr("checked", true); 
            
        // }

        $.each( $('table tr td>input'),  function(index, value) {
                 //   console.log(index)
                  //  console.log(value)
                    console.log(  $(this).val()  )  // 遍历取值
                    $(this).prop('checked',true)   // 全选
               })

        
    }






</script>

</html>

我是曜耀，我们下次见。

@耀@曜@燿@
关注
利用jQuery实现购物车功能
荒的博客
04-27 2万+
购物车----jQuery h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse; }
JavaScript、JQuery简单实现购物车功能
shaoyan233的博客
01-31 3709
食用前先导入JQuery文件 购物车 h1 { text-align:center; } table { margin:0 auto; width:40%; border:2px solid #aaa; border-collapse:coll
使用jQuery实现简单的购物车功能
weixin_45730094的博客
05-11 2093
JavaScript jQuery 购物车
jQuery实现简单购物车功能
m0_57202083的博客
09-01 2902
<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:6...
JQuery编写简易京东购物车功能
Ping_Pig的博客
01-10 2412
前天无意间看到有一位程序员的博客，有一篇名为无聊时编写的购物车，看了之后，只是觉得很垃圾，因为代码很臃肿，当然我写的也不咋地，当然我也是复习一下所学的js，再敲这个的期间遇到了如下问题,1:子元素父元素的混乱使用，层次没了解清楚就上手写！2：类型转换的问题，其中结算部分的ParesFloat和ParesInt以及.toFixed(2)的四舍五入,类型的把握，当然因为懒得弄，所以就直接写在了html
jQuery实现简易购物车
syy的博客
10-18 422
jQuery实现简易购物车
jquery实现简易购物车
weixin_55865982的博客
04-25 867
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>..
JS+Jquery简易购物车
一个开发初学者的博客
03-28 872
小bug请忽略，仅做参考，请勿其他用途
jQuery简易购物车加减
qq_45656036的博客
10-08 161
jquery实现购物车基本功能
12-30
购物车里的功能无非是商品数量的加减、商品删除、全选反选等操作，其实现过程如下所示： 1.html代码： <body> 购物车空空如也，快去选购吧 <input type=checkbox class=checkOnly style=...
jquery实现购物车购物车全选和增加删除商品.zip
10-14
在本项目中，我们主要探讨如何使用jQuery来实现一个具有全选和商品增删功能的购物车。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得创建交互性强的网页变得更为便捷。...
java项目，课程设计-ssm病人跟踪治疗信息管理系统
11-13
病人跟踪治疗信息管理系统采用B/S模式，促进了病人跟踪治疗信息管理系统的安全、快捷、高效的发展。传统的管理模式还处于手工处理阶段，管理效率极低，随着病人的不断增多，传统基于手工管理模式已经无法满足当前病人需求，随着信息化时代的到来，使得病人跟踪治疗信息管理系统的开发成了必然。 本网站系统使用动态网页开发SSM框架，Java作为系统的开发语言，MySQL作为后台数据库。设计开发了具有管理员；首页、个人中心、病人管理、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、分类管理、病人治疗状况管理、留言板管理、系统管理，病人；首页、个人中心、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、病人治疗状况管理，前台首页；首页、医生、医疗资讯、留言反馈、个人中心、后台管理、在线咨询等功能的病人跟踪治疗信息管理系统。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
liunx project 5
11-13
liunx project 5
PostgreSQL DBA实战视频教程（完整10门课程合集）
11-13
分享课程——PostgreSQL DBA实战视频教程（完整10门课程合集）
计算机科学基础期末考试试题
11-13
计算机科学基础期末考试试题
c语言实验设备管理系统
11-13
练习与巩固《C语言程序设计》理论知识，通过实践检验和提高实际能力，进一步培养自己综合分析问题和解决问题的能力。掌握运用C语言独立地编写调试应用程序和进行其它相关设计的技能。
提高图像在低光照条件下的清晰度和可见性，使用CNN的图像重建网络，来实现亮度调节，可用于小白学习
11-13
1. 数据集资源 公开低光照数据集：用于模型训练的低光照图像数据集，这些数据集包含了多种低光照条件下的图像，并附有增强后的高质量图像。 合成数据：在不足数据的情况下，可以通过对高亮度图像进行暗化处理生成低光图像对，以增强数据量。 自建数据集：对于特定场景，如安防、医疗等，可以拍摄或收集特定条件下的低光照图像来创建数据集，满足特定应用需求。 2. 硬件资源 GPU：大规模模型训练需要高性能计算，以支持大规模图像处理和神经网络训练。 数据存储：由于图像数据较大，需要大容量的存储设备如HDD或SSD来存储数据集及中间结果。 3. 深度学习框架及工具 PyTorch：支持构建和训练神经网络模型，尤其适合卷积神经网络（CNN）和生成对抗网络（GAN）的实现。 CUDA和cuDNN：为GPU加速库，在模型训练时可显著提升运行效率。
双哥微服务.md
11-13
双哥微服务
fb000f5e-12c5-a46b-102a-f08bdfa015f1.json
最新发布
11-13
fb000f5e-12c5-a46b-102a-f08bdfa015f1.json
使用jQuery打造简易购物车功能
3. jQuery脚本编写：编写jq脚本处理用户操作，如添加商品到购物车、修改商品数量、计算总价等。 4. 事件绑定：将jq脚本绑定到相应的事件上，如点击事件、输入事件等。 5. 数据存储与更新：在添加或修改商品数量时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值