如何根据计算出的月供动态展示对应卡布奇诺图片并统计咖啡数量

1. JavaScript代码修改 #

补充咖啡数量计算、图片渲染逻辑，同时封装公共计算方法避免代码重复，修改后完整代码如下：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var price = document.getElementById("monthlyPrice");
var capuccino = document.getElementById("capuccinoContainer");
var coffeeAmount = document.getElementById("coffeeAmount");
// 替换为你自己的整杯、半杯卡布奇诺图片实际地址
const FULL_CUP_IMG = "整杯卡布奇诺资源地址";
const HALF_CUP_IMG = "半杯卡布奇诺资源地址";

// 页面初始化时触发一次计算
updateCalc(slider.value);

slider.oninput = function() {
  output.innerHTML = this.value;
  updateCalc(this.value);
}

// 公共计算方法
function updateCalc(sliderVal) {
  const brut = (sliderVal * 0.7 / 100) / 12 + 2;
  const showPrice = Math.round(100 * brut) / 100;
  price.innerHTML = showPrice;
  
  // 按规则计算咖啡数量
  let coffeeCount;
  if (brut < 3.5) {
    coffeeCount = 0.5;
  } else {
    coffeeCount = Math.floor((brut - 3.5) / 1.75) / 2 + 1;
  }
  coffeeAmount.innerHTML = coffeeCount;
  
  // 渲染咖啡图片
  capuccino.innerHTML = "";
  const fullCupNum = Math.floor(coffeeCount);
  const hasHalfCup = coffeeCount % 1 !== 0;
  // 生成整杯图片
  for(let i=0; i<fullCupNum; i++) {
    const img = document.createElement("img");
    img.src = FULL_CUP_IMG;
    img.alt = "整杯卡布奇诺";
    img.className = "coffee-img";
    capuccino.appendChild(img);
  }
  // 生成半杯图片
  if (hasHalfCup) {
    const img = document.createElement("img");
    img.src = HALF_CUP_IMG;
    img.alt = "半杯卡布奇诺";
    img.className = "coffee-img";
    capuccino.appendChild(img);
  }
}

2. CSS代码补充 #

新增咖啡容器和图片的布局样式，添加在原有CSS代码末尾即可：

#capuccinoContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 1rem 0;
}
.coffee-img {
  width: 40px;
  height: auto;
}

3. 注意事项 #

请将JS代码中的FULL_CUP_IMG和HALF_CUP_IMG替换为你实际的图片资源地址，图片显示尺寸可通过修改.coffee-img的width属性自定义。

内容的提问来源于stack exchange，提问作者Adzidue