js实现购买数量加减效果
写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案
结构:
js代码:
<script type="text/javascript"> function getElementByAttr(tag, attr, value) { var aElements = document.getElementsByTagName(tag); var aEle = []; for (var i = 0; i < aElements.length; i++) { if (aElements[i].getAttribute(attr) == value) aEle.push(aElements[i]); } return aEle; } window.onload = function () { var box = getElementByAttr("div", "data-box", "buy"); for (var i = 0; i < box.length; i++) { calculate(box[i]); } } function calculate(box) { var oBtn = box.getElementsByTagName("button"); var ipt = box.getElementsByTagName("input")[0]; var number = parseInt(ipt.value); oBtn[0].onclick = function () { number--; if (number < 0) { number = 0; } ipt.value = number; } oBtn[1].onclick = function () { number++; ipt.value = number; } } </script>
1.通过getElementByAttr函数获取加减按钮和显示框的父元素(之前写过具体的实现思路),给父元素都统一定义了data-box属性
2.找到页面中所有目标元素后,循环遍历,给每一次目标元素执行函数calculate(box[i]),里面的参数就是它本身
3.编写函数,找到加减按钮和显示框,定义变量number存储显示框的值并进行取整
4.给第一个‘减’按钮增加onclick事件,每次点击先自减1,判断是否小于0,如果小于0,number就等于0,然后把运算出来的结果赋给显示框的值
5.给第二个‘加’按钮增加onclick事件,每次点击自增,赋值。
js实现购买数量加减效果的更多相关文章
- js实现输入框数量加减【转】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 购物车中,多件商品数量加减效果修改,实现总价随数量加减改变
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...
- js实现仿购物车加减效果
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- js 购物车的数量加减,对应的总价也随机变化
html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...
- 自己动手丰衣足食之 jQuery 数量加减插件
引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...
- web框架实现购物车数量加减
企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...
- js jquery 权限单选 bug修改以及正确代码 购物车数量加减
效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...
- vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- 用js进行日期的加减
如题,开始查了查js的使用文档,但没发现可以直接用的函数,于是就想自己写函数来着,这就要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,虽然不复杂但我想js应该不会这么低级,于是查了下 ...
随机推荐
- Protocol Buffer和JSON性能比较
JSON PB 数据结构支持 简单结构 较复杂结构 数据格式 文本 二进制 数据大小 一般 小,json大小的1/3左右 解析效率 一般 快,是json解析速度的3-10倍 可读性 好,自描述的 ...
- TodoList开发笔记 – Part Ⅱ
上一节给出了应用的两个主要UML类图,应用采用的技术也给出了,这一节开始实际设计编码 一.应用公开的方法 其实就几个的方法而已 1.代办事项的CRUD 2.代办事项归类目录的CRUD 3.代表事项“已 ...
- HTML的框架,表格
#2 HTML的框架,表格 [以下是个人笔记,由于水平有限,因此有错误的地方,希望M我.谢谢] 表格|表单|框架---------------表格:布局 ----现在很少用到好处: 适合做 ...
- JS定时跳转URL并输出剩余秒数
1. [代码][JavaScript]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <scrip ...
- 【分享】Python学习资源大合集
地址:http://www.hejizhan.com/html/xueke/520/x520_03.html Python安装软件合集(Windows)(78) Python教程——游戏编程(13) ...
- Visual Studio 2013中的“Browser Link”
前几天,参加了,VS13的新特性的讲座,回来便试了一下, 默认Html会引用如下脚本: <!-- Visual Studio Browser Link --> <script typ ...
- C#简单实现贪吃蛇程序(LinQ + Entity)
做梦想起来的C#简单实现贪吃蛇程序(LinQ + Entity) 最近一直在忙着单位核心开发组件的版本更新,前天加了一个通宵,昨天晚上却睡不着,脑子里面突然不知怎的一直在想贪吃蛇的实现方法.以往也有类 ...
- linux内核数据结构之链表
linux内核数据结构之链表 1.前言 最近写代码需用到链表结构,正好公共库有关于链表的.第一眼看时,觉得有点新鲜,和我之前见到的链表结构不一样,只有前驱和后继指针,而没有数据域.后来看代码注释发现该 ...
- iOS制作Static Library(静态库),实现多工程的连编
在iOS开发中,我们会发现一些偏底层或基础代码是直接可以复用的,当我们换一个项目,改变的只需要是偏上层的业务逻辑代码,所以我们可以把这部分基础代码制作为一个静态库static library,并不断扩 ...
- js的onclick和jquery的bind事件执行先后顺序
近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...