Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

javascript开发购物车加减之加减效果

开发加减效果

html部分代码：

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

首先我们要获取表单中input 的value值，也就是 1

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

如果我们在input 中输入文字时，代码如下：

            document.getElementById('id').onblur = function(){
                    var id = document.getElementById('id').value;
                    if(isNaN(id) || id < 1){
                        alert("请输入数字");
                        document.getElementById('id').value = 1;
                        return false;
                    }
                }

完整代码如下：

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

这样我们就实现了购物车数字加减的效果

Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492942 spielt ab