javascript开发购物车之函数实现加号功能

下面我们就来看一下html部分的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="price">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="count" >
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="total">1999</td>
            </tr>

            <tr class="tr2">
                <td>手机</td>
                <td id="price_1">2000</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="count_1">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="total_1">2000</td>
            </tr>
        </table>
        </br>
</body>
</html>

如上代码，我们有2个商品，如果我们每次多一个商品，都写一次加减号的功能，那么代码就太多了，虽然也可以，但是不可取，所以我们下面可以来做一个函数

我们分析下，函数的参数有哪些？

其实做加减功能，然后总价发生变化，我们需要的就是3个参数，单价，总价，数量

大家看上面代码中的显示单价的单元格，id 是 price 总价单元格，id 是 total 第一个商品文本框的 id 是 count

接下来，我们看单元格的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="price">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
                    <input type="text" value="1" id="count" onblur="a3('price','total','count')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
                </td>
                <td id="total">1999</td>
            </tr>

            <tr class="tr2">
                <td>手机</td>
                <td id="price_1">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
                    <input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
                </td>
                <td id="total_1">1999</td>
            </tr>
        </table>
        </br>
</body>
</html>

如上代码，我们给加减号都绑定了一个点击事件，里面带有3个参数商品单价 price 和 price_1 总价 total 和 total_1 数量 count 和 count_1

下面我们来实现加号功能

<script type="text/javascript">
            function a1(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                document.getElementById(id).value = v1+1;   //获取点击后的数量
                document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1); //总价格等于单价乘以点击后的数量值
            }
</script>

下面来看以下完整代码：看看实现的效果怎么样

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
    <script type="text/javascript">
        function a1(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                document.getElementById(id).value = v1+1;
                document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
            }
    </script>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="price">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
                    <input type="text" value="1" id="count" onblur="a3('price','total','count')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
                </td>
                <td id="total">1999</td>
            </tr>

            <tr class="tr2">
                <td>手机</td>
                <td id="price_1">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
                    <input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
                </td>
                <td id="total_1">1999</td>
            </tr>
        </table>
        </br>
</body>
</html>

看上面的例子，无论我有多少个商品，点击加号，价格不同，总价也不一样的，所以使用这样的方法会方便简单一点

新建文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		table{width:350px;border:1px solid #eee;text-align:center;}
		.tr2{height:50px;}
		input{width:30px;height:20px;text-align: center;}
		a{text-decoration:none}
	</style>
	<script type="text/javascript">
		function a1(td,td2,id){
				var price = document.getElementById(td).innerHTML;//获得单价
				var total = document.getElementById(td2).innerHTML;//获得总价
				var v1 = parseInt(document.getElementById(id).value);//获得数量
				document.getElementById(id).value = v1+1;
				document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
			}
	</script>
</head>
<body>
		<table cellspacing="0" cellpadding="0" border="1">
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总价</th>
			</tr>

			<tr class="tr2">
				<td>手表</td>
				<td id="price">1999</td>
				<td>
					<a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
					<input type="text" value="1" id="count" onblur="a3('price','total','count')">
					<a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
				</td>
				<td id="total">1999</td>
			</tr>

			<tr class="tr2">
				<td>手机</td>
				<td id="price_1">1999</td>
				<td>
					<a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
					<input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
					<a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
				</td>
				<td id="total_1">1999</td>
			</tr>
		</table>
		</br>
</body>
</html>

提交重置代码

自动运行

全屏