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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
layui异步加载table表中某一列数据的例子
Sep 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
ThinkPHP视图查询详解
2014/06/30 PHP
php的debug相关函数用法示例
2016/07/11 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python中正则表达式详解
2017/05/17 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python实现list由于numpy array的转换
2018/04/04 Python
python读写配置文件操作示例
2019/07/03 Python
如何在django中实现分页功能
2020/04/22 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
承办会议欢迎词
2014/01/17 职场文书
软件售后服务方案
2014/05/29 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
详解Python requests模块
2021/06/21 Python
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS