javascript는 빼기 기호 기능을 구현하기 위해 장바구니 기능을 개발합니다.

이전 섹션에서는 더하기 기호를 클릭하는 것이 실제로 매우 간단합니다.

더하기 기호의 js 코드를 복사한 다음 더하기 기호를 빼기 기호로 변경합니다. 계속해서 줄이면 음수로 줄어들 수 있어 요구 사항에 맞지 않는 경우가 있으므로 먼저 판단해야 할 코드는 다음과 같습니다.

<script>
    function a2(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                if(v1>1){
                    document.getElementById(id).value = v1-1;
                    document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
                }else{
                    var v1 = 1;
                }
            }
</script>

위 코드와 동일

먼저 총 단가 수량을 구해야 합니다. 그런 다음 숫자가 1보다 크면 뺄 수 있습니다. 1보다 크지 않으면 기본값 1을 제공합니다.

완전한 코드는 다음과 같습니다.

<!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);
            }

        function a2(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                if(v1>1){
                    document.getElementById(id).value = v1-1;
                    document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
                }else{
                    var 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); } function a2(td,td2,id){ var price = document.getElementById(td).innerHTML;//获得单价 var total = document.getElementById(td2).innerHTML;//获得总价 var v1 = parseInt(document.getElementById(id).value);//获得数量 if(v1>1){ document.getElementById(id).value = v1-1; document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1); }else{ var 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>

제출하다 코드 재설정

자동운전