js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js实现购物车数量的增加与减少，js实现购物车数量的自增与自减</title>

</head>

<body>

<center>

<table>

<tr>

<td>1</td>

<td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td>

</tr>

<tr>

<td>2</td>

<td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td>

</tr>

<tr>

<td>3</td>

<td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td>

</tr>

</table>

</center>

<script type="text/javascript">

function checknum(obj){

    if(obj.value >10){

        obj.value = 10;

        alert('Max 10!');

    }

}

function changeNum(obj,num)

{

    var input = getParent(obj).getElementsByTagName("input");

    for(var i=0;i<input.length;i++)

    {

        if(input[i].type=="text")

        {

            if(input[i].value == "")

                input[i].value = num;

            else

                input[i].value = input[i].value - 0 + num;

        }

        if(input[i].value == "-1")

                input[i].value = 0;

        if(input[i].value == "11")

                input[i].value = 10;

    }

}

//获取父级对像

function getParent(obj)

{

    if(typeof(obj) != "object"){obj = document.getElementById(obj);}

    if(obj)

        return obj.parentElement || obj.parentNode;

}

</script>

</body>

</html>

js实现购物车数量的增加与减少，js实现购物车数量的自增与自减的更多相关文章

  1. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  2. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  3. Android-----购物车（包含侧滑删除，商品筛选，商品增加和减少，价格计算，店铺分类等）

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. 主要包含了 店铺分类,侧滑删除,商品筛选,增加和减少,价格计算等功能. 看看效果图: 重要代码: private v ...

  4. 示例篇-购物车的简单示例和自定义JS

    简介: 支持平台: Android4.0,iOS7.0,Windows 10, Windows 10 mobile 说明:主要是演示listview所在的ui和模板cell所在的ui之间数据的交互,点 ...

  5. Linux LVM逻辑卷配置过程详解（创建，增加，减少，删除，卸载）

    Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...

  6. Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性

    实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-dec ...

  7. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  8. 用HttpCombiner来减少js和css的请问次数

    HttpCombiner也不记得是谁写的了,功能是把多个js文件或css文件合并到一块,压缩一下一起发给客户端来优化网站. 用法是这样的: <script type="text/jav ...

  9. 深入浅出Node.js（一）：什么是Node.js

    Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹.从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟Joyent获得企业资助,再到 ...

随机推荐

  1. linux下配置maven并修改maven源

    参考文章 <Linux下Maven的安装与使用> <aliyun阿里云Maven仓库镜像地址> <maven国内镜像配置(Ubuntu)> 下载maven,具体目录 ...

  2. Java 基础篇之IO

    IO Java IO 流使用了一种装饰器设计模式,它将 IO 流分成底层节点流和上层处理流,其中节点流用于和物理节点直接关联,程序可以把不同物理节点流包装成统一的处理流,从而允许程序使用统一的输入.输 ...

  3. SGI RB-tree深入理解

    前言 在学习STL源码之前我也曾无数次想要弄懂红黑数的原理,奈何每次都被困难打退.说实话,红黑树是真的很难理解,需要不断沉淀才能慢慢体会其妙处.这两天看SGI的RB-tree实现,结合侯捷老师的< ...

  4. [bzoj3193][JLOI2013]地形生成_排列组合_贪心

    [JLOI2013]地形生成 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3193 题解: 这种求总排列的题,一种常规做法就是所有的元素 ...

  5. Oracle- 数据库知识回顾

    数据库知识回顾: sql语句的语法规范: sql语句不区分大小写,习惯上系统的保留字.关键字.函数名称大写,表名和列名小写 使用空格和换行分隔单词效果一样,一般情况下独立的整句不换行,不同的子句需要换 ...

  6. jstl与EL表达式

    一·el表达式介绍 EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} ...

  7. 【LOJ】#3109. 「TJOI2019」甲苯先生的线段树

    LOJ#3109. 「TJOI2019」甲苯先生的线段树 发现如果枚举路径两边的长度的话,如果根节点的值是$x$,左边走了$l$,右边走了$r$ 肯定答案会是$(2^{l + 1} + 2^{r + ...

  8. Cow and Snacks（吃点心--图论转换） Codeforces Round #584 - Dasha Code Championship - Elimination Round (rated, open for everyone, Div. 1 + Div. 2)

    题意:https://codeforc.es/contest/1209/problem/D 有n个点心,有k个人,每个人都有喜欢的两个点心,现在给他们排个队,一个一个吃,每个人只要有自己喜欢的点心就会 ...

  9. 12306火车票余票查询&Python实现邮件发送

    查询余票接口 打开12306官网,并进入余票查询页面,同时开启chrome浏览器F12控制台,以北京到上海为例,搜索2018年10月1日的余票信息,点击搜索按钮,可以在控制台发送了一条GET请求,请求 ...

  10. 基于全备份+binlog方式恢复数据

    基于全备份+binlog方式恢复数据 将bkxt从库的全备份在rescs5上恢复一份,用cmdb操作 恢复全备后执行如下操作 set global read_only=OFF; stop slave; ...