masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

pembangunan javascript kesan penambahan dan penolakan troli beli-belah

Membangunkan kesan penambahan dan penolakan

bahagian html kod: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>购物车加减</title>
 <style type="text/css">
 a{
 text-decoration: none;display:block;width:30px;height:30px;
 background:#eee;line-height:30px;font-weight:bolder;
 }
 .body{width:500px;height:300px;background:#ccc;margin:0 auto;text-align:center;padding:80px;}
 #a1{float:left;margin-right:20px;margin-top:2px;text-align:center;}
 form{float:left;}
 form input{width:40px;height:30px;border:1px solid #eee;text-align:center;}
 #a2{float:left;margin-left:20px;margin-top:2px;text-align:center;}
 </style> 
</head>
<body>
 <div>
 <a href="#" id="a1">-</a>
 <form>
 <input type= "text" value="1" id='id'>
 </form>
 <a href="#" id="a2">+</a>
 </div>
</body>
</html>

Mula-mula kita perlu mendapatkan nilai input dalam borang, iaitu 1

var input = document.getElementById ('id').value;

disimpan dalam pembolehubah

Apabila tanda tolak diklik, kodnya adalah seperti berikut: = function(){

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            getElementById('id').value>1){

                                                                                                                                                                                                                                                               }lain{
                                       document.getElementById('id').                                                                                                                                             

document.getElementById('a2').onclick = function(){
if(isNaN(document.getElementById('id').value)){
alert("Sila masukkan nombor") ;
                                                                                                                                                                                                                                                                                           v1=                                                                                                                                                                                                                                                                                                                                                                                      melalui v1=parseInt(v1);
                        melalui document.getElementById('id').nilai =                                                                                                                                                                                                                                                                                                                                                                                                                                   
          var id = document.getElementById('id').value; ");
document.getElementById ('id').value = 1;
                                                                                         kembali palsu;                    rreeee
Dengan cara ini kita boleh capai shopping Kesan tambah dan tolak nombor kereta

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车加减</title> <style type="text/css"> a{ text-decoration: none;display:block;width:30px;height:30px; background:#eee;line-height:30px;font-weight:bolder; } .body{width:500px;height:300px;background:#ccc;margin:0 auto;text-align:center;padding:80px;} #a1{float:left;margin-right:20px;margin-top:2px;text-align:center;} form{float:left;} form input{width:40px;height:30px;border:1px solid #eee;text-align:center;} #a2{float:left;margin-left:20px;margin-top:2px;text-align:center;} </style> <script type="text/javascript"> window.onload=function(){ var input = document.getElementById('id').value; document.getElementById('a1').onclick = function(){ if(isNaN(document.getElementById('id').value)){ alert("请输入数字"); }else{ if(document.getElementById('id').value>1){ document.getElementById('id').value = parseInt(document.getElementById('id').value) - 1; }else{ document.getElementById('id').value = 1; } } } document.getElementById('a2').onclick = function(){ if(isNaN(document.getElementById('id').value)){ alert("请输入数字"); }else{ var v1 = document.getElementById('id').value; v1=parseInt(v1); document.getElementById('id').value = v1 + 1; } } document.getElementById('id').onblur = function(){ var id = document.getElementById('id').value; if(isNaN(id) || id < 1){ alert("请输入数字"); document.getElementById('id').value = 1; return false; } } } </script> </head> <body> <div> <a href="#" id="a1">-</a> <form> <input type= "text" value="1" id='id'> </form> <a href="#" id="a2">+</a> </div> </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)  492332 permainan