簡體   English   中英

價格格式和用戶輸入值更改滑塊

[英]Price formatting and user input value to change slider

我需要在哪里設置.toFixed(2)方法以使我的范圍滑塊輸出具有固定格式? 1.9-> 1.90 2-> 2.00

此外,是否有可能在用戶輸入價格(格式(GER):0,00€)的輸入字段中將其轉換為0.00€,並根據用戶輸入更改滑塊值?

非常感謝你!

 function outputUpdate(vol) { document.querySelector('#volume').value = vol; } function outputUpdate2(vol2) { document.querySelector('#volume2').value = vol2; } function TKPJ(){ var Field1 = document.getElementById('Field1').value; var Field2 = document.getElementById('Field2').value; var Field3 = document.getElementById('Field3').value; var Format = document.getElementById('Format').value; var Slider1 = document.getElementById('Slider1').value; var Slider2 = document.getElementById('Slider2').value; var vol = document.getElementById('volume').value; var vol2 = document.getElementById('volume2').value; var Total = ((Field1*Field2*Field3*Format*vol*vol2)/100).toFixed(2); Total = Total.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); document.getElementById('Total').innerHTML = "Cost per year = "+ Total +" €"; } 
  <p>Field1</p> <input type="number" name="Field1" id="Field1" onkeyup="TKPJ()"> </div> <p>Field2</p> <input type="number" name="Field2" id="Field2" onkeyup="TKPJ()"> <p>Field3</p> <input type="number" name="Field3" id="Field3" onkeyup="TKPJ()"> <select name="Format" id="Format" size="1" type="number" onchange="TKPJ()"> <option value="1">Year</option> <option value="12">Month</option> <option value="365">Day</option> </select> <p>Slider1</p> <input id="Slider1" type="range" min="0.20" max="5" step="0.01" value="1.50" oninput="outputUpdate(this.value)"> <output for="Preisliter" id="volume"> 1.50 </output> <br> <p>Slider2</p> <input id="Slider2" type="range" min="0.1" max="25" step="0.1" value="12.50" oninput="outputUpdate2(this.value)"> <output for="Slider2" id="volume2"> 12.5 </output> <h3 id="Total">Cost per year = 0,00€</h3> 

在調用.toFixed(2) ,必須分析該數字,該數字被編碼為字符串。 解析后,您有了數字對象,可以正確調用.toFixed()方法

function outputUpdate2(vol2) {
    document.querySelector('#volume2').value = parseFloat(vol2).toFixed(2);
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM