jq实现加减功能

效果展示:
jq实现加减功能
文章图片


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实现加减功能
文章图片

【jq实现加减功能】

    推荐阅读