JavaScript는 텍스트 상자 처리를 구현하기 위해 장바구니 기능을 개발합니다.

마지막 두 섹션에서는 덧셈과 뺄셈 기능을 완료했습니다. 이제 텍스트 상자 수를 처리해 보겠습니다.

여기서 문자를 입력할 때에도 텍스트 상자를 입력할 수 있습니다. 또는 중국어

실행하지 말고 프롬프트 메시지를 보낸 다음 텍스트 상자에 기본값을 지정하세요. 코드를 살펴보겠습니다.

<script>
function a3(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                if(isNaN(v1) || v1 < 1){
                    alert("请输入正确的数字");
                    document.getElementById(id).value = 1 ;
                    v1 = parseInt(document.getElementById(id).value);
                }else{
                    document.getElementById(id).value = v1 ;
                }

                document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
            }
</script>

v1은 우리가 얻은 텍스트 상자의 값이고 v1 판단을 수행합니다. , isNaN() 함수는 v1이 잘못된 숫자인지, v1<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;
                }
            }


        function a3(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                if(isNaN(v1) || v1 < 1){
                    alert("请输入正确的数字");
                    document.getElementById(id).value = 1 ;
                    v1 = parseInt(document.getElementById(id).value);
                }else{
                    document.getElementById(id).value = v1 ;
                }

                document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
            }
    </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; } } function a3(td,td2,id){ var price = document.getElementById(td).innerHTML;//获得单价 var total = document.getElementById(td2).innerHTML;//获得总价 var v1 = parseInt(document.getElementById(id).value);//获得数量 if(isNaN(v1) || v1 < 1){ alert("请输入正确的数字"); document.getElementById(id).value = 1 ; v1 = parseInt(document.getElementById(id).value); }else{ document.getElementById(id).value = v1 ; } document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1); } </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>

제출하다 코드 재설정

자동운전