javascript开发购物车教程之实现减号功能

上一节我们学习到了，加号功能的实现，下面我们来讲解减号功能

先来看一下上节代码

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

我们在这个基础上继续写减号功能

减号的功能很简单，我们可以吧加号的代码拷贝过来，然后稍作修改即可

<script>
document.getElementById('a1').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);                           
 }
</script>

这样我们的减号功能就实现了，但是需要注意，还是有点小问题的，当我们减到1之后，是可以一直继续减的，这样就会出现负数，所以这块，我们需要在进行处理一下

当我们数量值大于1的时候，可以一直减，当不大于1的时候，我们可以给数量框一个默认值

代码如下：

<script>
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;
                            }
                }
</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">
            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;
                            }
                }
            }
    </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

neue Datei

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

einreichen Code zurücksetzen

Automatische Operation

javascript开发购物车教程之实现减号功能

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]