masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial pembangunan troli beli-belah JavaScript dengan fungsi yang sempurna

Dalam 2 bahagian sebelum ini, kami telah menambah dan menolak troli beli-belah, dan fungsi menukar jumlah harga telah selesai, tetapi masih terdapat beberapa masalah kecil

Jika saya memasukkan teks dalam teks kotak, dalam bahasa Inggeris, kita akan Ia perlu diproses

Rakan, fikirkan tentangnya, masukkan kandungan dalam kotak teks, apabila tetikus kita meninggalkan kotak teks, acara kehilangan fokus akan dicetuskan. kami akan menggunakan onblur untuk mengendalikan acara kehilangan fokus ini,

Jika kita memasukkan nombor, maka jumlah harga juga perlu dikira berdasarkan nombor yang kita masukkan

Mari kita tulis fokus yang hilang acara, kod adalah seperti berikut: 

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

Kod di atas: Apabila kandungan teks bukan nombor, atau kurang daripada 1, ia akan menggesa, dan kemudian ia tidak akan melaksanakan lebih jauh dan kembali terus kepada

Jadi kami telah melengkapkan fungsi ini

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


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; } } 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>
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)  492884 permainan