ショッピングカートの加算および減算効果の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>

まず、フォームの入力の値を取得する必要があります。これは 1

var input = document.getElementById('id').value; です。 bilival vilaseマイナスサインをクリックすると、コードは次のとおりですdocument.getElementById（ 'a2'）。 {Alert（ "番号を入力してください"）;次のセクション

新しいファイル

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

提出するリセットコード

自動運転

全画面表示