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

덧셈과 뺄셈 효과 개발

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) || {

8

다음 섹션

새로운 파일

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

제출하다 코드 재설정

자동운전