장바구니 덧셈과 뺄셈 효과의 자바스크립트 개발

덧셈과 뺄셈 효과 개발

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;을 가져와야 합니다.

변수에 저장됨

빼기 기호를 클릭하면 코드는 다음과 같습니다.

document.getElementBy ID('a1'). Alert( "숫자를 입력하세요") - 1;
~ ~ ㅋㅋㅋ alert("번호를 입력하세요"); v1 = document.getElementById('id').value; ~ (id) || {

지속적인 학습

새로운 파일

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

제출하다 코드 재설정

자동운전