js实现购物车商品数量加减


Posted in Javascript onSeptember 21, 2020

本文实例为大家分享了js实现购物车商品数量加减的具体代码,供大家参考,具体内容如下

Html

<link rel='stylesheet' type='text/css' media='screen' href='../css/bootstrap.min.css'>
<script src="../js/jquery-1.12.4.js"></script>


<div style="width: 300px;margin: 30px auto 0;">
  <form class="form-inline">
   <div class="form-group">
    <div class="input-group">
     <div onclick="minus()" class="input-group-addon">-</div>
     <input type="text" class="form-control" id="exampleInputAmount">
     <div onclick="add()" class="input-group-addon">+</div>
    </div>
   </div>
  </form>
</div>

CSS

<style>
  .list a {
   display: block;
   margin: 30px;
   padding: 0 20px;
   height: 100px;
  }

  .list .list-img {
   width: 180px;
   height: 100px;
   border-radius: 6px;
   object-fit: cover;
  }

  .list .title {
   font-size: 16px;
   font-weight: bold;
   white-space: nowrap;
   text-overflow: ellipsis;
   margin: 10px 0 0;
  }

  .list .content {
   font-size: 14px;
   line-height: 26px;
   margin: 10px 0 0;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
  }
</style>

Js

<script>
 var num = 0;
  // 对表单进行初始赋值
  $('#exampleInputAmount').val(num);
  // 点击添加时
  function add() {
   // 方法体
   if (num >= 5) {
    alert('最多可添加5个');
    return;
   }
   num++;
   console.log(num);
   $('#exampleInputAmount').val(num);
  }
  // 点击删除时
  function minus() {
   if (num < 1) {
    alert('已减到最低了');
    return;
   }
   num--;
   console.log(num);
   $('#exampleInputAmount').val(num);
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 #Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 #Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 #Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 #Javascript
JS实现小米轮播图
Sep 21 #Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 #Javascript
vue组件入门知识全梳理
Sep 21 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书