Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

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>


Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492938 spielt ab