根據計算出的數字顯示不同的影像-有解無憂

我正在創建一個滑塊，允許用戶計算每月付款。

但是我想在 id="capuccinoContainer" 的 div 中添加一個價格比較。

如果月付少于3.5，我想展示半杯卡布奇諾（這是一張卡布奇諾一分為二的圖片）
如果月供大于3.5小于5.25，我想展示一個完整的卡布奇諾（完整的卡布奇諾的圖片）
如果月供大于5.25小于7，我要展示卡布奇諾半

.... 等等。

理想情況下，我還想計算并顯示 id="coffeAmount" 元素中的咖啡數量

這是我目前的代碼，我不知道是否應該進行任何更改，但我需要您的幫助，非常感謝！

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var price = document.getElementById("monthlyPrice")
var capuccino = document.getElementById("capuccinoContainer")
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  brut = (this.value * 0.7 / 100) / 12   2;
  price.innerHTML = Math.round(100 * brut) / 100;

}

.pricing-calculator-container {
  max-width: 730px;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgb(221 227 240 / 90%);
  border-radius: 20px;
  padding: 1rem;
}

.intro-pricing-calculator {
  text-align: center;
  padding: 13px;
  background: #F2F4F8;
  max-width: 688px;
  border-radius: 20px;
  margin: 0 auto 3rem;
  font-weight: bold;
}

.first-part-pricing-calculator {
  display: flex;
  justify-content: space-between;
}

.second-part-pricing-calculator {
  text-align: center;
}

.range-container {
  padding-left: 1rem
}

.text-range-container {
  display: flex;
  gap: 25px;
  padding-bottom: 2rem;
}

.title-range {
  align-self: center;
}

.range-input-field {
  background: #F2F4F8;
  border-radius: 30px;
  padding: 12px 25px;
  font-weight: bold;
  min-width: 61px;
}

.module-border-wrap {
  min-width: 250px;
  position: relative;
  background: linear-gradient(to right, #3CE7E3, #00C2FF);
  padding: 3px 3px 0;
  border-radius: 10px;
}

.price-module {
  background: #FFF;
  padding: 1rem 1rem 25px;
  border-radius: 10px;
  text-align: center;
}

<div class="pricing-calculator-container">
  <div class="first-part-pricing-calculator">
    <div class="range-container ">
      <div class="text-range-container ">
        <div class="title-range">Your investment:</div>
        <div class="range-input-field">
          <p style="text-align: center;"><span id="demo"></span> €</p>
        </div>
      </div>
      <div>
        <input type="range" min="1" max="10000" value="100" class="slider1" id="myRange">
      </div>
    </div>
    <div class="module-border-wrap">
      <div class="price-module">
        <div class="text-font-24"><span id="monthlyPrice"></span>€</div>
        <div>per month</div>
      </div>
    </div>
  </div>
  <div class="second-part-pricing-calculator">
    <div id="capuccinoContainer"></div>
    <div>It will cost you <span id="coffeeAmount"></span> coffees</div>
  </div>
</div>

uj5u.com熱心網友回復：

只需將imghtml添加到所有 3 個新 DIV。它會根據您的條件而變化。我可以數咖啡杯，但我需要知道 1 杯咖啡的價格。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var price = document.getElementById("monthlyPrice")
var capuccino = document.getElementById("capuccinoContainer")
output.innerHTML = slider.value;
// new CODE
            var halfCappuccino = document.getElementById("half-cappuccino");
            var fullCappuccino = document.getElementById("full-cappuccino");
            var fullCappuccinoHalf = document.getElementById("full-cappuccino-half");
// end of new CODE

slider.oninput = function() {
  output.innerHTML = this.value;
  brut = (this.value * 0.7 / 100) / 12   2;
  price.innerHTML = Math.round(100 * brut) / 100;

  // new CODE
               if (brut <= 3.5) {
                 halfCappuccino.className = 'half-cappuccino display';
                 fullCappuccino.className = 'full-cappuccino';
                 fullCappuccinoHalf.className = 'full-cappuccino-half';
              } else if (brut > 3.5 && brut <= 5.25) {
                halfCappuccino.className = 'half-cappuccino';
                 fullCappuccino.className = 'full-cappuccino display';
                 fullCappuccinoHalf.className = 'full-cappuccino-half';
              } else if (brut > 5.25 && brut <= 7) {
                 halfCappuccino.className = 'half-cappuccino';
                 fullCappuccino.className = 'full-cappuccino';
                 fullCappuccinoHalf.className = 'full-cappuccino-half display';
              }
              
              else {
                halfCappuccino.className = 'half-cappuccino';
                fullCappuccino.className = 'full-cappuccino';
                fullCappuccinoHalf.className = 'full-cappuccino-half';
              }
              
              // end of new CODE

}

.pricing-calculator-container {
  max-width: 730px;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgb(221 227 240 / 90%);
  border-radius: 20px;
  padding: 1rem;
}

.intro-pricing-calculator {
  text-align: center;
  padding: 13px;
  background: #F2F4F8;
  max-width: 688px;
  border-radius: 20px;
  margin: 0 auto 3rem;
  font-weight: bold;
}

.first-part-pricing-calculator {
  display: flex;
  justify-content: space-between;
}

.second-part-pricing-calculator {
  text-align: center;
}

.range-container {
  padding-left: 1rem
}

.text-range-container {
  display: flex;
  gap: 25px;
  padding-bottom: 2rem;
}

.title-range {
  align-self: center;
}

.range-input-field {
  background: #F2F4F8;
  border-radius: 30px;
  padding: 12px 25px;
  font-weight: bold;
  min-width: 61px;
}

.module-border-wrap {
  min-width: 250px;
  position: relative;
  background: linear-gradient(to right, #3CE7E3, #00C2FF);
  padding: 3px 3px 0;
  border-radius: 10px;
}

.price-module {
  background: #FFF;
  padding: 1rem 1rem 25px;
  border-radius: 10px;
  text-align: center;
}

/* ADD THIS CODE */
.half-cappuccino, 
.full-cappuccino, 
.full-cappuccino-half {
   display: none;
}

.display {
   display: block;
}

<div class="pricing-calculator-container">
  <div class="first-part-pricing-calculator">
    <div class="range-container ">
      <div class="text-range-container ">
        <div class="title-range">Your investment:</div>
        <div class="range-input-field">
          <p style="text-align: center;"><span id="demo"></span> €</p>
        </div>
      </div>
      <div>
        <input type="range" min="1" max="10000" value="100" class="slider1" id="myRange">
      </div>
    </div>
    <div class="module-border-wrap">
      <div class="price-module">
        <div class="text-font-24"><span id="monthlyPrice"></span>€</div>
        <div>per month</div>
      </div>
    </div>
  </div>
  <div class="second-part-pricing-calculator">
    <div id="capuccinoContainer"></div>
    

 <!--  ADD THIS CODE    -->
<div>It will cost you <span id="coffeeAmount"></span> coffees</div>
<div class="half-cappuccino" id="half-cappuccino"> put image 1 here</div>
<div class="full-cappuccino" id="full-cappuccino"> put image 2 here</div>
<div class="full-cappuccino-half" id="full-cappuccino-half"> put image 3 here</div>
  </div>
</div>

uj5u.com熱心網友回復：

玩這個

<div>It will cost you <div id="coffeeAmount">????</div> coffees</div>
coffeeAmount.style.width = (amount*5) "px"

顯示代碼片段

const slider = document.getElementById("myRange"),
 output = document.getElementById("demo"),
 price = document.getElementById("monthlyPrice"),
 capuccino = document.getElementById("capuccinoContainer"),
 coffeeAmount = document.getElementById("coffeeAmount")
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  brut = (this.value * 0.7 / 100) / 12   2;
  const amount = Math.round(100 * brut) / 100;
  price.innerHTML = amount
  coffeeAmount.style.width = (amount*5) "px"
}

.pricing-calculator-container {
  max-width: 730px;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgb(221 227 240 / 90%);
  border-radius: 20px;
  padding: 1rem;
}

.intro-pricing-calculator {
  text-align: center;
  padding: 13px;
  background: #F2F4F8;
  max-width: 688px;
  border-radius: 20px;
  margin: 0 auto 3rem;
  font-weight: bold;
}

.first-part-pricing-calculator {
  display: flex;
  justify-content: space-between;
}

.second-part-pricing-calculator {
  text-align: center;
}

.range-container {
  padding-left: 1rem
}

.text-range-container {
  display: flex;
  gap: 25px;
  padding-bottom: 2rem;
}

.title-range {
  align-self: center;
}

.range-input-field {
  background: #F2F4F8;
  border-radius: 30px;
  padding: 12px 25px;
  font-weight: bold;
  min-width: 61px;
}

.module-border-wrap {
  min-width: 250px;
  position: relative;
  background: linear-gradient(to right, #3CE7E3, #00C2FF);
  padding: 3px 3px 0;
  border-radius: 10px;
}

.price-module {
  background: #FFF;
  padding: 1rem 1rem 25px;
  border-radius: 10px;
  text-align: center;
}
#coffeeAmount { white-space:nowrap;  width:0; display:inline-block; overflow-x:hidden; }

<div class="pricing-calculator-container">
  <div class="first-part-pricing-calculator">
    <div class="range-container ">
      <div class="text-range-container ">
        <div class="title-range">Your investment:</div>
        <div class="range-input-field">
          <p style="text-align: center;"><span id="demo"></span> €</p>
        </div>
      </div>
      <div>
        <input type="range" min="1" max="10000" value="100" class="slider1" id="myRange">
      </div>
    </div>
    <div class="module-border-wrap">
      <div class="price-module">
        <div class="text-font-24"><span id="monthlyPrice"></span>€</div>
        <div>per month</div>
      </div>
    </div>
  </div>
  <div class="second-part-pricing-calculator">
    <div id="capuccinoContainer"></div>
    <div>It will cost you <div id="coffeeAmount">????</div> coffees</div>
  </div>
</div>

使用您的新代碼：

<div class="cappuccino" id="half-cappuccino"> put image 1 here</div>
<div class="cappuccino" id="full-cappuccino"> put image 2 here</div>
<div class="cappuccino" id="full-cappuccino-half"> put image 3 here</div>

const cups = document.querySelectorAll(".cappuccino");
cups.forEach((cup,i) => cups.innerHTML = (2*i)<amount ?  `<img src="halfcup.png" />` : "")

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355055.html

標籤：javascript

上一篇：未捕獲的型別錯誤：$(...).uploadify不是函式

下一篇：Vue在計算資料之前創建Component