jQuery实现淘宝购物车小组件
我爱撸码，撸码使我感到快乐!
大家好，我是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实现淘宝购物车小组件的更多相关文章
- jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
- 用jQuery模拟淘宝购物车
首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中"全选"复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中. 2.当所有商品前的复选框选中时,&qu ...
- jquery仿淘宝购物车页面商品结算（附源码）
1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <met ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
- web——自己实现一个淘宝购物车页面
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
随机推荐
- lis最长上升子序列
因为是最长上升的,可以用一个数组储存上升的序列,如果后一个数字比数组的最大数字还大,就加到末尾去,如果不大于,那么就可以把这个数组中比他大的数字替换掉,因为如果数字更小,后面上升序列更长的可能性更大, ...
- 用vue制作饿了么首页(1)
无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破. 很明显的饿了么首页分为三个部分(组件), 上面的头部(商家信息), 中间路由 购物车 每部分先占住自己位置,然后挨个将这三部分分别 ...
- Linux re
正则表达式并不是一个工具程序,而是一个字符串处理的标准依据,如果想要以正则表达式的方式处理字符串,就得使用支持正则表达式的工具,例如grep.vi.sed.asw等. 注意:ls不支持正则表达式. g ...
- ASP.NET常见异常处理示例
将指定的年月日转初始化为DateTime新的实例(Nop.Admin.Controllers.OrderController.ParseProductAttributes) case Attribut ...
- Gym 101873D - Pants On Fire - [warshall算法求传递闭包]
题目链接:http://codeforces.com/gym/101873/problem/D 题意: 给出 $n$ 个事实,表述为 "XXX are worse than YYY" ...
- 复习C++：VS2008中的宏干嘛用的
VS2008中有宏,可也进行编辑和设置. 好处: 1.快速生成代码,帮助开发. 2.个人定制化功能,IDE更合适自己用. 3.提升编程效率. 缺点: 使用VB开发,一开始用起来费事.不过有官方参考 ...
- hackbar功能简介
SQL:提供三种数据库的sql查询语句,以及一些方便联合查询的语句 XSS:提供xss攻击语句 string.fromcharcode():将根据UNICODE 值来输出xss语句 html char ...
- MongoDB "$" 字符 下标位置
我们可以修改列表里面元素的名字 例如: 修改age=34的数据,hobby里面的"足球"改为"网球" }) { "_id" : Object ...
- 后台管理界面admin
admin组件:展示数据表,快速的录入数据. 为了安全,可以在路由分发时修改下admin的名字.(一定要改) 1.不想使用英文,则在app里的settings修改一下(在最下面的位置) LANGUAG ...
- emqtt日志、证书、集群状态等位置
1.日志 进入pod后,cd /var/log/emqttd/ 可以看到四种日志 2.证书等位置 cd /etc/emqttd 3.集群状态查询位置 任意位置 emqttd_ctl cluster s ...