将数字舍入到小数位

Round number to decimal places

本文关键字：小数 舍入 数字      更新时间：2023-09-26

我有一个用于BMI计算器的html正文的javascript。到目前为止，一切都在我自己进行。我只需要两件事的帮助，我无法弄清楚。首先，我无法将输出 BMI 计算结果提高到小数点后 2 位。我尝试过使用 toFixed（2） 和双倍，但没有运气。

此外，当您输入第一个变量时，它会突出显示表中的注释。当您执行第二次输入（具有不同的结果）时，它会突出显示一个新字段并保留旧字段。（不刷新自己）也无法弄清楚。

下面的脚本

        <html>
      <head>
    <title>Body Mass Index (BMI) Calculator</title>
    <script language="JavaScript">
    //Variables Input
    <!--
        function calcBmi() {
var weight = document.bmiForm.weight.value //Input of Weight
var height = document.bmiForm.height.value //Input of Height

//Calculation of BMI
if(weight > 0 && height > 0){   
var finalbmi = weight/(height/100*height/100)
document.bmiForm.finalbmi.value = finalbmi
//Incorrect Input of Numeric Variables
var rvalue = true
if ( (weight < 30) || (weight > 450) ) 
    {   alert ("Invalid weight. Please check and re-enter");
        rvalue = false
    }
if ( (height < 80) || (height > 300) ) 
        {   alert ("Invalid Height. Please check and re-enter");
        rvalue = false
    }
//Highlighted Decisions are made below
if(finalbmi < 18){
document.getElementById('tr1').style.backgroundColor="grey";
    }
    if(finalbmi > 18 && finalbmi < 19.999){
    document.getElementById('tr2').style.backgroundColor="grey";
}
if(finalbmi > 20 && finalbmi < 25.999){
document.getElementById('tr3').style.backgroundColor="grey";
}
if(finalbmi > 26 && finalbmi < 30.999){
document.getElementById('tr4').style.backgroundColor="grey";
}
if(finalbmi > 31){
document.getElementById('tr5').style.backgroundColor="grey";
}
}
//Incorrect Characters Inserted, this message is an error code
else{
alert("Error, Please Fill In Numeric values Only ") 
}
}
//-->
//--> CSS Style Formatting
</script>
    <style>
        .container {
            width: 100%;
            }
        .wrapper {
            margin: 0 auto; 
            width: 800px;
            }
        table {
            width: 500px;
            border: 10px solid #666;
            margin: 0 auto;
            }
        form {
            text-align: center;
            }
    </style>
  </head>
  <body>
  <div class="container">
    <div class="wrapper">
        <form name="bmiForm">
            <p>
            <p>
            Your Weight(kg): <input type="text" name="weight" size="11"><br />
            <p>
            <p>
            Your Height(cm): <input type="text" name="height" size="11"><br />
            <p>
            <p>
            <input type="button" value="Calculate BMI" onClick="calcBmi()"><br />
            <p>
            <p>
            Your BMI: <input type="text" name="finalbmi" size="11"><br />
            <p>
            <p>
            <!--Highlighted Desicions shown below -->
            <table id="bmitable" border="1" width="40%" cellpadding="5"     cellspacing="5" style="background-color:white;">
            <tr id='tr1'>
                     <td colspan="2"><font size="2">Under 18 - Your Are     Very Underweight and Possibly Malnourished.</font></td>
            </tr>
        <tr id='tr2'>
                     <td colspan="2"><font size="2">Under 20 - You Are     Underweight and Could Afford to Gain a Little Weight.</font></td>
        </tr>
            <tr id='tr3'>
                     <td colspan="2"><font size="2">20 to 25 - You Have a     Healthy Weight Range for a Young and Middle-Aged Adults.</font></td>
            </tr>
            <tr id='tr4'>
                     <td colspan="2"><font size="2">26 to 30 - You Are     Overweight.<font></td>
            </tr>
            <tr id='tr5'>
                     <td colspan="2"><font size="2">Over 30 - You Are     Obese</font></td>
            </tr>
            </table>
        </form>
    </div>  
<div>
</body>
</html>

为我工作

document.bmiForm.finalbmi.value = new Number(finalbmi).toFixed(2);

您还需要将其他tr的背景设置为白色，如下所示

if(finalbmi < 18){
     document.getElementById('tr1').style.backgroundColor="grey";
}
else{
     document.getElementById('tr1').style.backgroundColor="white";
}

点击这里看小提琴

相关文章：