效果展示:
文章图片
HTML:
咨询分钟 - 50 + 咨询次数 - 1 + CSS: .buymain_body_son { display: flex;
flex-direction: row;
margin-top: 4vw;
} .buymain_body_son_left { display: flex;
font-size: 14px;
letter-spacing: 1px;
text-shadow: 0 0 0 #777;
align-items: center;
} .buymain_body_son_right { display: flex;
flex-direction: row;
flex: 1;
justify-content: flex-end;
align-items: center;
} .buymain_body_btn { font-size: 14px;
background-color: #f5f5f5;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1vw;
padding: 0 2vw;
border-radius: 4px;
} .buymain_body_num { font-size: 14px;
background-color: #f5f5f5;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1vw;
padding: 0vw 2vw;
border-radius: 4px;
} JS: // 咨询分钟的加减,假设最少20分钟,最高60分钟 var buytime = 50;
// 初始值 $("#mtime").html(buytime);
$("#thisnewtime").html(buytime);
$("#addtime").click(function(){ if (buytime==60) return;
// 等于60的时候不能加 buytime ++;
$("#mtime").html(buytime);
$("#thisnewtime").html(buytime);
$("#cuttime").css("color","#000");
if(buytime==60){// 等于60的时候加号变浅 $("#addtime").css("color","#999");
} }) $("#cuttime").click(function(){ if (buytime==20) return;
// 等于20的时候不能减 buytime --;
$("#mtime").html(buytime);
$("#thisnewtime").html(buytime);
$("#addtime").css("color","#000");
if(buytime==20){// 等于20的时候减号变浅 $("#cuttime").css("color","#999");
} }) // 价格变化 var price1 = 300;
// 初始单价 var price2 = '小计
¥'+price1;
var price3 = '总计¥'+price1;
$("#priceno1").html(price1);
$("#priceno2").html(price2);
$("#priceno3").html(price3);
// 咨询次数的加减,假设最少1,最多不限制(假设99) var buynum = 1;
// 初始值 $("#cutnum").css("color","#999");
$("#mnum").html(buynum);
$("#thisnewnum").html(buynum);
$("#addnum").click(function(){ if (buynum==99) return;
// 等于99的时候不能加 buynum ++;
var newprice1 = price1*buynum;
// 刷新价格 var newprice2 = '小计
¥'+newprice1;
// 刷新价格 var newprice3 ='总计¥'+newprice1;
// 刷新价格 $("#mnum").html(buynum);
$("#thisnewnum").html(buynum);
$("#priceno1").html(newprice1);
$("#priceno2").html(newprice2);
$("#priceno3").html(newprice3);
$("#cutnum").css("color","#000");
if(buynum==99){// 等于99的时候加号变浅 $("#addnum").css("color","#999");
} }) $("#cutnum").click(function(){ if (buynum==1) return;
// 等于1的时候不能减 buynum --;
var newprice1 = price1*buynum;
// 刷新价格 var newprice2 = '小计
¥'+newprice1;
// 刷新价格 var newprice3 ='总计¥'+newprice1;
// 刷新价格 $("#mnum").html(buynum);
$("#thisnewnum").html(buynum);
$("#priceno1").html(newprice1);
$("#priceno2").html(newprice2);
$("#priceno3").html(newprice3);
$("#addnum").css("color","#000");
if(buynum==1){// 等于1的时候减号变浅 $("#cutnum").css("color","#999");
} }) 最后效果大概就是这样:
文章图片
【jq实现加减功能】