javascript開發(fā)購物車加減之加減效果
開發(fā)加減效果
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;
用一個變量存儲起來
當(dāng)點擊減號時，代碼如下：
????????????document.getElementById('a1').onclick = function(){
?? ??? ??? ??? ??? ??? ?if(isNaN(document.getElementById('id').value)){
?? ??? ??? ??? ??? ??? ???? alert("請輸入數(shù)字");
?? ??? ??? ??? ??? ??? ?}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("請輸入數(shù)字");
?? ??? ??? ??? ??? ??? ?}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("請輸入數(shù)字");
?? ??? ??? ??? ??? ??? ?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("請輸入數(shù)字");
}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("請輸入數(shù)字");
}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("請輸入數(shù)字");
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>這樣我們就實現(xiàn)了購物車數(shù)字加減的效果
