我爱撸码，撸码使我感到快乐!

大家好，我是Counter，本章将实现淘宝购物车小组件，

用原生js可以实现吗，当然可以，可是就是任性一回，就是想用jQuery

来实现下。HTML代码不多才4行，CSS样式也不多，主要是功能，你要是能在里面输入除了0~20的整数，

算我输，嘿嘿。主要需求就是购物车里的商品可以是0到20件，少了不行，多了装不下，就是这样。(记得如果有bug就留

言我哦，我快马加鞭改bug，不过不能有bug，自信。。。)

效果如下：

主要是jQuery部分，每一行都有详细注释，欢迎一起探讨技术，一起成长。

( 在这边我用的jQuery是在线引入方式，大家可以去jQuery官网下载下来，离线引入的方式，都可以。
直接拷贝去用是行不通的，记得引入jQuery就可以了。)

代码给出：

<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>淘宝购物车组件</title>

    <!-- CSS样式 -->

    <style>

        .cart {

            position: relative;

            width: 110px;

            height: 30px;

            /* border: 1px solid black; */

            font-size: 0;

        }

        span {

            display: inline-block;

            width: 30px;

            height: 30px;

            text-align: center;

            line-height: 30px;

            font-size: 16px;

            background-color: #ededed;

            cursor: pointer;

            user-select: none;

        }

        input {

            position: absolute;

            top: 0;

            left: 30px;

            box-sizing: border-box;

            width: 50px;

            height: 30px;

            text-align: center;

            z-index: 999;

        }

        .cart span:nth-of-type(2) {

            position: absolute;

            right: 0;

            top: 0;

        }

        .cart .limit {

            background-color: #888;

        }

    </style>

</head>

<body>

    <div class="cart">

        <span class="reduce">-</span>

        <input type="text" value="0">

        <span class="plus">+</span>

    </div>

    <!-- 这边已经在线引入了，所有这个本地文件注释了 -->

    <!-- <script src="../jquery-3.3.1.js"></script> -->

    <!-- jQuery代码 -->

    <script>

        // 设置初始购物车商品数量值

        var val = 0;

        // 给input标签绑定“input”事件，切记这边不绑定keydown事件，这个事件响应慢半拍，意味着在input中你输入1，它给你返回空，你再输入2，它给你返回1，因为它绑定的是键盘按下的那一瞬间，那个时候value值为空

        $('input').on("input", function () {

            // 每次触发input事件，就执行cont函数，并传入0，这边的0并没有起到什么作用，知识为了传参而传参，是为了更好的配合，点击+或者点击-的事件

            cont(0);

            // 当手动输入数字时，这边也需要进行一次判断，及时设置上相对应的不可点击背景色

            lim();

        })

        // 设置lim函数，用于判定边界阈值，来确定不可点击的区域背景色

        function lim() {

            // console.log('触发');

            // 当输入框里为0时，那么-的区域颜色就变深（给这个元素增加class名，class名在css中已经提前设定好颜色了，下面同理）

            if (val === 0 ) {

                $('.reduce').addClass('limit');
　　　　　　　　　 $('.plus').removeClass('limit');

            }

            // 当输入框为20时，那么+的区域颜色就变深

            else if (val === 20) {

                $('.plus').addClass('limit');
　　　　　　　　　 $('.reduce').removeClass('limit');

            }

            else {

                // 如果输入框里的值都不为0 或者 20 那么意味着，这两个区域都是可以再次点击的，所以移除这个class名

                $('.limit').removeClass('limit');

            }

        }

        // 当页面刷新时，就执行一次lim函数，确保0区域颜色深

        lim();

        // 每次触发input事件，都将触发cont函数

        function cont(num) {

            // parseInt("2i") 会返回2，parseInt会尽可能的返回首部整数，其他位置不生效，意味着在原有的基础上，parseInt都将返回整数。所以这里如果款内原本为2的话，那么将不会进入第一个判断区，款里什么值，还是什么值。

            val = parseInt($('input').val()) + num;

            // 如果val小于0，或者不是一个数的话那么就让val等于0，下面同理。 前面都说了，这边的基础上parseInt()返回都为整数，那么这边为什么要来个判读是不是一个数呢，因为这边如果把款里的数值用键盘的删除键删除的话，那么val将会是一个NaN，切记

            if (val <= 0 || isNaN(val)) {

                val = 0

            }

            else if ( val >= 20 ) {

                val = 20;

            }

            // 关键一步，设置款里的这个值为val

            $('input').val(val);

        }

        // 给-和+绑定点击事件

        $(".reduce").add(".plus").on("click", function () {

            // 判定当前点击的jQuery对象是不是-所在的元素，如果是的话那么执行cont函数，并且传入参数-1，代表用户点击了减1，下面反之。

            if ( $(this).hasClass('reduce') ) {

                cont(-1);

            }

            else {

                cont(1);

            }

            // 每次点击都要进行一次判定，判定当前的val是否到达阈值，并且改变背景颜色。

            lim();

        })

    </script>

</body>

</html>

jQuery实现淘宝购物车小组件的更多相关文章

  1. jquery模拟淘宝购物车

    今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...

  2. 用jQuery模拟淘宝购物车

    首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中"全选"复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中. 2.当所有商品前的复选框选中时,&qu ...

  3. jquery仿淘宝购物车页面商品结算（附源码）

    1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <met ...

  4. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  5. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  6. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  7. 仿淘宝购物车demo---增加和减少商品数量

    在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...

  8. web——自己实现一个淘宝购物车页面

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  9. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

随机推荐

  1. 原码、补码，反码以及JAVA中数值采用哪种码表示

    原码.补码,反码以及JAVA中数值采用哪种码表示 1.原码定义(摘自百度百科):一种计算机中对数字的二进制定点表示方法,原码表示法在数值前面增加了一位符号位(即最高位为符号位):正数该位为0,负数该位 ...

  2. express.js graphql express-graphql

    文档 创建应用 const l = console.log; var express = require("express"); var graphqlHTTP = require ...

  3. 6.cookie、session，localStorage、sessionStorage

    必须在服务器下运行 cookie/session 存东西 cookie 时间 过期时间 4k 服务器把一部分数据保存在客户端(浏览器) session 回话 时间 服务器存取用户信息 5M local ...

  4. route 配置默认网关

    影响Linux系统网络中网关配置信息的3种方式 1.生效文件cat /etc/sysconfig/network-scripts/ifcfg-eth0 GATEWAY=10.0.0.254 <- ...

  5. mybits根据表自动生成 java类和mapper 文件

    mybits根据表自动生成 java类和mapper 文件 我这个脑子啊,每次创建新的工程都会忘记是怎么集成mybits怎么生成mapper文件的,so today , I can't write t ...

  6. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  7. Javascript htmldecode

    // HtmlDecode http://lab.msdn.microsoft.com/annotations/htmldecode.js // client side version of the ...

  8. Nginx之使用nginx搭建简单的文件服务器

    使用nginx可以搭建简单文件服务器 安装nginx(不详述) 修改配置文件 /usr/local/nginx/conf/nginx.conf user root; /usr/local/nginx/ ...

  9. 查看Sql Server 数据库的内存使用情况

    -- 查询SqlServer总体的内存使用情况 select type , sum(virtual_memory_reserved_kb) VM_Reserved , sum(virtual_memo ...

  10. [Day8] eclipse

    快捷键 1.内容辅助键  Alt+/ 2.格式化Ctrl+Shift+f 代码区域右键 -- Source – Format 3. 自动导包: Ctrl+Shift+o 如果当前类在多个包中都存在,这 ...