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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 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面向对象全攻略 (九)访问类型
2009/09/30 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python实现井字棋小游戏
2020/03/04 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
一套软件测试笔试题
2014/07/25 面试题
师范生自荐信
2013/10/27 职场文书
行政主管岗位职责
2013/11/18 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Go语言测试库testify使用学习
2022/07/23 Golang
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技