码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-14 22:43:03      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   sp   java   for   

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实现购物车数量的自增与自减

标签:style   blog   http   io   color   ar   sp   java   for   

原文地址:http://www.cnblogs.com/afish/p/4098163.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!