완벽한 기능을 갖춘 JavaScript 장바구니 개발 튜토리얼

앞 2절에서는 장바구니 가감, 총액 변경 기능까지 완료했지만, 아직 작은 문제가 남아있습니다

텍스트 박스에 텍스트를 입력하면 영어로 처리해야 합니다

친구 여러분, 생각해 보세요. 텍스트 상자에 내용을 입력하세요. 마우스가 텍스트 상자를 벗어나면 초점 상실 이벤트가 트리거됩니다. 다음으로 onblur 상실 초점 이벤트를 사용하여 이를 처리하겠습니다. ,

숫자를 입력하면 입력한 숫자를 기준으로 총 가격도 계산해야 합니다

초점 상실 이벤트를 작성해 보겠습니다. 코드는 다음과 같습니다.

<script>
    document.getElementById('id').onblur = function(){
            var id = document.getElementById('id').value;
            //判断是否是数字或者是否小于1
             if(isNaN(id) || id < 1){
                  alert("请输入正确的数字");
                  document.getElementById('id').value = 1;
                  return;
              }
             document.getElementById('td2').innerHTML = parseInt(id) * parseInt(good);
       }

위 코드: 콘텐츠가 의 텍스트가 숫자가 아니거나 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">
            window.onload=function(){
                var input = document.getElementById('id').value; //获取文本框的value值
                var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
                //加号功能
                document.getElementById('a2').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            v1=parseInt(v1);
                            document.getElementById('id').value = v1 + 1;
                            document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
                }
                //减号功能
                document.getElementById('a1').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            if(v1>1){
                                v1=parseInt(v1);
                                document.getElementById('id').value = v1 - 1;
                                document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);
                            }else{
                                document.getElementById('id').value=1;
                            }
                }

                document.getElementById('id').onblur = function(){
                    var id = document.getElementById('id').value;
                    //判断是否是数字或者是否小于1
                    if(isNaN(id) || id < 1){
                        alert("请输入数字");
                        document.getElementById('id').value = 1;
                        return;
                    }
                    document.getElementById('td2').innerHTML = parseInt(id) * parseInt(good);
                }


            }
    </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="td">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="id">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="td2">1999</td>
            </tr>
        </table>
</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"> window.onload=function(){ var input = document.getElementById('id').value; //获取文本框的value值 var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容 //加号功能 document.getElementById('a2').onclick = function(){ var v1 = document.getElementById('id').value; v1=parseInt(v1); document.getElementById('id').value = v1 + 1; document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1); } //减号功能 document.getElementById('a1').onclick = function(){ var v1 = document.getElementById('id').value; if(v1>1){ v1=parseInt(v1); document.getElementById('id').value = v1 - 1; document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1); }else{ document.getElementById('id').value=1; } } document.getElementById('id').onblur = function(){ var id = document.getElementById('id').value; //判断是否是数字或者是否小于1 if(isNaN(id) || id < 1){ alert("请输入数字"); document.getElementById('id').value = 1; return; } document.getElementById('td2').innerHTML = parseInt(id) * parseInt(good); } } </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="td">1999</td> <td> <a href="#" id="a1" class="tp1">-</a> <input type="text" value="1" id="id"> <a href="#" id="a2" class="tp2">+</a> </td> <td id="td2">1999</td> </tr> </table> </body> </html>

제출하다 코드 재설정

자동운전