如何在输入时显示 5 位小数（math.round）

Question

这是一个单位转换器示例。我想显示 5 位小数，但我是 js 新手，无法解决它...

例如，人们想将 k 转换为 m 没关系，因为数字很大。但是反向尝试（m 到 k）基本上输入永远不会改变，直到用户写入最小值 162500。例如，我想在输入中显示为输出 0.5。当人们写 81250 时，他们应该得到 0.5。当用户写入 500 时，他们可以得到 0.00307

我希望我能解释一下自己。

Javascript

var firstInput = document.getElementById('firstInput') , secondInput = document.getElementById("secondInput") ,
    firstVar , secondVar , weightButton = document.getElementById('weightButton') , firstText = document.getElementById('firstText')
    secondText = document.getElementById("secondText"); 
// the calculating functions of Distance
function fromKtoM(){
    secondInput.value =  (Math.round(parseFloat(firstInput.value) * 162500)) || 0.000000   ;
};
function fromMtoK(){
    firstInput.value =  (Math.round(parseFloat(secondInput.value) / 162500 )) || 0.000000  ;
};
// other functions 
function changeOther(){
    firstText.innerHTML = 'Radian' ;
    secondText.innerHTML = "Degree" ;
    firstInput.oninput = fromRtoD ;
    secondInput.oninput = fromDtoR ;
    firstInput.value = '' ;
    secondInput.value = '' ;
}; 
function changeOther1(){
    firstText.innerHTML = 'MpH' ;
    secondText.innerHTML = "KpH" ;
    firstInput.oninput = fromMtoKp ;
    secondInput.oninput = fromkptoM ;
    firstInput.value = '' ;
    secondInput.value = '' ;
}; 
function changeOther2(){
    firstText.innerHTML = 'Liter' ;
    secondText.innerHTML = "Gallon" ;
    firstInput.oninput = fromLtoG ;
    secondInput.oninput = fromGtoL ;
    firstInput.value = '' ;
    secondInput.value = '' ;
}; 
 
// weight functions 
function change(){
    firstText.innerHTML = 'Kilograme' ;
    secondText.innerHTML = "Pound" ;
    firstInput.oninput = fromKtoP ;
    secondInput.oninput = fromPtoK ;
    firstInput.value = '' ;
    secondInput.value = '' ;
} ;
function change1(){
    firstText.innerHTML = 'Kilograme' ;
    secondText.innerHTML = "Ounce" ;
    firstInput.oninput = fromKtoO ;
    secondInput.oninput = fromOtoK ;
    firstInput.value = '' ;
    secondInput.value = '' ;
} ;
function change2(){
    firstText.innerHTML = 'Gram' ;
    secondText.innerHTML = "Ounce" ;
    firstInput.oninput = fromGtoO ;
    secondInput.oninput = fromOtoG ;
    firstInput.value = '' ;
    secondInput.value = '' ;
} ;
function change3(){
    firstText.innerHTML = 'Pound' ;
    secondText.innerHTML = "Ounce" ;
    firstInput.oninput = fromPtoO ;
    secondInput.oninput = fromOtoP ;
    firstInput.value = '' ;
    secondInput.value = '' ;
} ;
// distance functions 
function changeDistance(){
        firstText.innerHTML = 'Kilometer' ;
        secondText.innerHTML = "Mile";
        firstInput.oninput = fromKtoM ;
        secondInput.oninput = fromMtoK ;
        firstInput.value = '' ;
        secondInput.value = '' ;
};
function changeDistance1(){
        firstText.innerHTML = 'Centimeter' ;
        secondText.innerHTML = "Inch";
        firstInput.oninput = fromCtoI ;
        secondInput.oninput = fromItoC ;
        firstInput.value = '' ;
        secondInput.value = '' ;
};
function changeDistance2(){
        firstText.innerHTML = 'Meter' ;
        secondText.innerHTML = "Yard";
        firstInput.oninput = fromMtoY ;
        secondInput.oninput = fromYtoM ;
        firstInput.value = '' ;
        secondInput.value = '' ;
};
function changeDistance3(){
        firstText.innerHTML = 'Meter' ;
        secondText.innerHTML = "Feet";
        firstInput.oninput = fromMtoF ;
        secondInput.oninput = fromFtoM ;
        firstInput.value = '' ;
        secondInput.value = '' ;
};
function changeDistance4(){
        firstText.innerHTML = 'Centimeter' ;
        secondText.innerHTML = "Feet";
        firstInput.oninput = fromCtoFe ;
        secondInput.oninput = fromFetoC ;
        firstInput.value = '' ;
        secondInput.value = '' ;
};
function changeDistance5(){
        firstText.innerHTML = 'Inch' ;
        secondText.innerHTML = "Feet";
        firstInput.oninput = fromItoF ;
        secondInput.oninput = fromFtoI ;
        firstInput.value = '' ;
        secondInput.value = '' ;
};
// digree functions 
function changeDigree(){
        firstText.innerHTML = 'Celsius' ;
        secondText.innerHTML = "Fahrenheit";
        firstInput.oninput = fromCtoF ;
        secondInput.oninput = fromFtoC ;
        firstInput.value = '' ;
        secondInput.value = '' ;
};
function changeDigree1(){
    firstText.innerHTML = 'Fahrenheit' ;
        secondText.innerHTML = "Kelvin";
        firstInput.oninput = fromFtoK ;
        secondInput.oninput = fromKtoF ;
        firstInput.value = '' ;
        secondInput.value = '' ;
} ;
function changeDigree2(){
    firstText.innerHTML = 'Kelvin' ;
        secondText.innerHTML = "Celecuis";
        firstInput.oninput = fromKtoC ;
        secondInput.oninput = fromCtoK ;
        firstInput.value = '' ;
        secondInput.value = '' ;
} ;
 
// when clicking buttons this functions get called
// distance button 
$("#distanceButton").on("click" , changeDistance) ;
$("#distanceButton1").on("click" , changeDistance1) ;
$("#distanceButton2").on("click" , changeDistance2) ;
$("#distanceButton3").on("click" , changeDistance3) ;
$("#distanceButton4").on("click" , changeDistance4) ;
$("#distanceButton5").on("click" , changeDistance5) ;
 
// digree buttons 
$("#digreeButton").on("click" , changeDigree);
$("#digreeButton1").on("click" , changeDigree1);
$("#digreeButton2").on("click" , changeDigree2);
 
// weight buttons
$('#weightButton').on('click' , change)  ;
$('#weightButton1').on('click' , change1)  ;
$('#weightButton2').on('click' , change2)  ;
$('#weightButton3').on('click' , change3)  ;
 
// other buttons
$('#otherButton').on('click' , changeOther)  ;
$('#otherButton1').on('click' , changeOther1)  ;
$('#otherButton2').on('click' , changeOther2)  ;
 
// This is the clear button function
$('#clear').on('click' , function(){
    firstInput.value = '' ;
    secondInput.value = '' ;
} ) ;
 
// initital Config is km/mile
    firstInput.oninput = fromKtoM ;
    secondInput.oninput = fromMtoK ;
 
// responsive for other devices
 
$("button").not(document.getElementById( "clear" )).addClass('btn waves-effect waves-light blue-grey darken-2') ;

HTML

<form id='form1' class='row'>
            <div id="formm1"><p id='firstText' style='margin-bottom: 0px; color: white; font-size: 12px; font-weight: 200; font-family: 'Source Sans Pro', sans-serif;'>From</p><input id='firstInput' type='number' step="0.01" pattern="^\d+(?:\.\d{1,2})?$" value="0" placeholder="0.00" /></div>
            <div id="formm2"><p id='secondText' style='margin-bottom: 0px; color: white; font-size: 12px;  font-weight: 200; font-family: 'Source Sans Pro', sans-serif;'>To</p><input id='secondInput' type='number' step="0.01" pattern="^\d+(?:\.\d{1,2})?$" value="0"  /></div>
    </form>
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script><script  src="./script.js"></script>

Answer 1

使用 to fixed() 方法根据需要设置小数点数。 例如，

常数 x = 0.123234243; const y = x.toFixed(5)

Answer 2

不幸的是，带有 5 位数字的 toFixed 方法对您的情况没有帮助，因为它会自动对数字进行四舍五入，因此 500 / 162500 返回 0.00308 而不是 0.00307，就像您期望的那样，此外，对于 81250 / 162500 它返回 0.50000 而不是 0.5。您可以改为将除法的结果转换为字符串，并将. 之后超过第五位的所有数字切片：

function fromMtoK(n) {
    const str = (n / 162500).toString();
    return str.slice(0, str.indexOf('.') + 1 + 5);
};

console.log(fromMtoK(81250)); //<-- prints 0.5
console.log(fromMtoK(500));  // <-- prints 0.00307