忧郁之子
jq实现点击增加或者减少商品数量并且自动计算总价格
本文将为点击增加或者减少商品数量并且自动计算总价格相关教程,具体实例代码请看下文:
点击增加或者减少商品数量并且自动计算总价格:
本章节介绍一下如何实现点击按钮来添加或者删除商品的数量,并且能够自动计算商品的总价格。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.zhimengzhe.com/" />
<title>织梦者</title>
<style type="text/css">
span{
color:red;
cursor:pointer;
}
</style>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#quantity").keyup(function(){
if(isNaN($(this).val())||parseInt($(this).val())<1){
$(this).val("1");
$("#totalPrice").html($("#price").val());
return;
}
var total=parseFloat($("#price").val())*parseInt($(this).val());
$("#totalPrice").html(total.toFixed(2));
})
$("#add").click(function(){
numAdd();
});
$("#del").click(function(){
numDec();
});
})
/*商品数量+1*/
function numAdd(){
var num_add = parseInt($("#quantity").val())+1;
if($("#quantity").val()==""){
num_add = 1;
}
$("#quantity").val(num_add);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
/*商品数量-1*/
function numDec(){
var num_dec = parseInt($("#quantity").val())-1;
if(num_dec<1){
//购买数量必须大于或等于1
alert("not lt 1");
}
else{
$("#quantity").val(num_dec);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
}
</script>
</head>
<body>
<p>
<label for="name" >单价:</label>
<input style="width:20%" value="28" id="price" />
<br>
<label for="name" >数量:</label>
<button type="button" id="del" class="btn btn-primary">-</button>
<input type="text" value="1" style="width:20%" id="quantity" />
<button type="button" id="add" class="btn btn-primary">+</button>
</p>
总价格:<span id="totalPrice">28</span>
</body>
</html>