<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js数量加减</title>
<script type="text/javascript" src="http://www.jb51.net/Public/js/jquery.min.js"></script> <script type="text/javascript">
/*或者不用jquery*/
/*商品数量框输入*/
function keyup(){
var quantity = document.getElementById("quantity").value;
if(isNaN(quantity) || parseInt(quantity)!=quantity || parseInt(quantity)<1){
quantity = 1;
return;
}
if(quantity>=10){
document.getElementById("quantity").value=quantity.substring(0,quantity.length-1);
alert("商品数量不能大于10");
}
} /*商品数量+1*/
function numAdd(){
var quantity = document.getElementById("quantity").value;
var num_add = parseInt(quantity)+1;
var price=document.getElementById("price").value;
if(quantity==""){
num_add = 1;
}
if(num_add>=10){
document.getElementById("quantity").value=num_add-1;
alert("商品数量不能大于10");
}else{
document.getElementById("quantity").value=num_add;
var Num=price*num_add;
document.getElementById("totalPrice").innerHTML=Num.toFixed(2);
}
}
/*商品数量-1*/
function numDec(){
var quantity = document.getElementById("quantity").value;
var price=document.getElementById("price").value;
var num_dec = parseInt(quantity)-1;
if(num_dec>0){
document.getElementById("quantity").value=num_dec;
var Num=price*num_dec;
document.getElementById("totalPrice").innerHTML=Num.toFixed(2);
}
}
function show()
{
document.getElementById("totalPrice").innerHTML=3.25*3;
}
</script> </head>
<body>
<p>Quantity: <span onclick="numDec()">-</span> <input type="text" id="quantity" /> <span onclick="numAdd()">+</span></p>
<p class="sdsd">Total Price: <span id="totalPrice">28.10</span></p>
<input type="hidden" value="28.1" id="price" /><!--单价-->
<input type="button" value="展示" onclick="show()"/>
</body>
</html>
第二种方法：不包含计算价格
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var price=0;
$("#cut").click(function(){
price=$("#num").val();
if($("#num").val()==0){
return
}
else{
price--;
}
$("#num").val(price);
})
$("#add").click(function(){
price=$("#num").val();
price++;
$("#num").val(price);
})
})
</script>
<input id="cut" type="button" value="-"/>
<input id="num" type="text" style=" width:20px; text-align:center" value="0"/>
<input id="add" type="button" value="+"/>
方法3：
<script type="text/JavaScript">
function qtyUpdate(kind){
var f = document.form1;
var c = f.qty.value;
if(kind == "up"){
c++;
}else if(kind == "down"){
if(c > 1) c--;
}
f.qty.value = c;
}
</script> <FORM name="form1" >
<A href="javascript:qtyUpdate('down')">-</A>
<INPUT value=2 readOnly size=5 name="qty">
<A href="javascript:qtyUpdate('up')">+</A>
</FORM> <script type="text/JavaScript">
function qtyUpdate11(kind){
var f = document.ipu;
var c = f.qcc.value;
if(kind == "jia"){
c++;
}else if(kind == "jian"){
if(c > 1) c--;
}
f.qcc.value = c;
}
</script> <FORM name="ipu" >
<A href="javascript:qtyUpdate11('jian')">-</A>
<INPUT value="0" readOnly size="5" name="qcc">
<A href="javascript:qtyUpdate11('jia')">+</A>
</FORM>