加减计算小功能,类似于商品购物车价格加减计算
Html样式:
<div style="text-align:center;">
<img src="images/Ahri_square_0.png"></img>
</div>
<div style="text-align:center;">
<span>价格:9999</span><br>
<span>折扣:7.7%</span>
</div>
<div style="text-align:center;">
<button onclick="addAndSubtract(1)"><b>-</b></button>
<span id="count">0</span>
<button onclick="addAndSubtract()"><b>+</b></button>
</div>
<div style="text-align:center;">
总价格:<span id="totalPrice">0</span>
</div>
js代码:
<!-- jquery插件 -->
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
//加减计算
function addAndSubtract(data){
var count = $("#count").text();//获取购买个数
var totalPrice = $("#totalPrice").text();//获取总价格
//判断是点击了+按钮还是-按钮
if(data==1){
//购买个数不能小于0
if(count<1){
return;
}else{
//修改购买个数span标签内容
$("#count").text(parseInt(count)-1);
//计算减一的总价格
var v = parseFloat(totalPrice)-(9999-9999*0.077);
//修改总价格span标签内容
$("#totalPrice").text(retainDecimals(v));
}
}else{
//修改购买个数span标签内容
$("#count").text(parseInt(count)+1);
//计算加一的总价格
var v = parseFloat(totalPrice)+(9999-9999*0.077);
//修改总价格span标签内容
$("#totalPrice").text(retainDecimals(v));
}
}
//保留两位小数
function retainDecimals(data){
//转换成字符串
data = data.toString();
//判断是否有小数点
if(data.indexOf(".") != -1){
//正则切割字符串
var array = data.split(".");
//判断小数位是否大于3位
if(array[1].length>2){
//小数位的第三位数
var three = array[1].substring(2,3);
//小数位的前两位数
var two = array[1].substring(0,2);
//小数位的第三位数是否大于4
if(three>"4"){
//小数位的第一位数
var one = array[1].substring(0,1);
//小数位的第一位数是否是0
if(one == 0 && parseInt(two) != 9){
two = "0"+(parseInt(two)+1);
}else{
two = parseInt(two)+1;
//判断前两位小数位加一是否等于100
if(two == 100){
//直接返回整数位加1
return parseInt(array[0]) + 1;
}
}
}
//判断前两位小数位是否是00
if(two == 00){
//直接返回整数位
return array[0];
//判断第二位小数位是否是0
}else if(two.toString().substring(1,2) == 0){
//直接返回整数带一位小数
return array[0]+"."+two.toString().substring(0,1);
}else{
//返回整数带两位小数
return array[0]+"."+two;
}
}
}
return data;
}
</script>
保留两位小数的方法不太稳定,其实JavaScript提供了toFixed() 方法就是用于保留小数的,toFixed()方法可把 Number 四舍五入为指定小数位数的数字,toFixed()方法带一个参数,该参数规定小数的位数,是0~20之间的值,包括0和20,有些实现可以支持更大的数值范围。如果省略了该参数,将用0代替。