masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial pembangunan troli beli-belah JavaScript untuk melaksanakan fungsi tanda tolak

Kami telah mempelajari dalam bahagian sebelumnya tentang pelaksanaan fungsi tanda tambah Mari kita jelaskan fungsi tanda tolak di bawah Fungsi tanda tolak

Fungsi tanda tolak adalah sangat mudah tandakan kod dan kemudian ubah suainya sedikit

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

Dengan cara ini, fungsi tanda tolak kita direalisasikan, tetapi perlu diperhatikan bahawa masih terdapat sedikit masalah Selepas kita mengurangkannya kepada 1, kita boleh teruskan kurangkan, jadi nombor negatif akan muncul, jadi kita perlu berurusan dengan bahagian ini

Apabila kita Apabila nilai kuantiti lebih daripada 1, ia boleh dikurangkan secara berterusan Apabila ia tidak lebih daripada 1, kita boleh memberikan kotak kuantiti nilai lalai

Kodnya adalah seperti berikut: 

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

Dengan cara ini, kami mempunyai fungsi penambahan dan penolakan troli beli-belah , kami telah menyelesaikan fungsi menukar jumlah harga mengikut perubahan kuantiti Kod lengkap adalah seperti berikut: 

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

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"> 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>
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)  492812 permainan