masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

javascript membangunkan fungsi troli beli-belah untuk melaksanakan fungsi tanda tolak

Dalam bahagian sebelumnya, kami telah menyelesaikan fungsi tanda tambah Mengklik tanda tolak sebenarnya sangat mudah

Kami menyalin kod js tanda tambah, dan kemudian menukar tanda tambah kepada. tanda tolak Itu sahaja, tetapi akan ada masalah Jika kita terus mengurangkan, ia boleh dikurangkan kepada nombor negatif, yang tidak memenuhi keperluan kita

Jadi, kita mesti membuat pertimbangan seperti berikut: 

<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>

Kod di atas

Mula-mula dapatkan jumlah kuantiti harga unit, dan kemudian nilai Apabila nombor lebih daripada 1, kita boleh menolaknya apabila ia tidak lebih daripada 1, kami memberikan nilai lalai 1

Kod lengkap adalah seperti berikut:

<!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>

Dengan cara ini, penambahan dan penolakan kami telah selesai

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492873 permainan