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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
微信小程序实现上传图片功能
May 28 Javascript
js实现简单选项卡功能
Mar 23 Javascript
vue项目中使用多选框的实例代码
Jul 22 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
js 覆盖和重载 函数
2009/09/25 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
jquery Form轻松实现文件上传
2017/05/24 jQuery
详解vue 实例方法和数据
2017/10/23 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
haskell实现多线程服务器实例代码
2013/11/26 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
基于python实现删除指定文件类型
2020/07/21 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
培训主管的岗位职责
2013/11/23 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
英文投诉信格式
2015/07/03 职场文书
中学教代会开幕词
2016/03/04 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
vue实现锚点定位功能
2021/06/29 Vue.js