利用 原生 的 funciotn 观念写一个 BMI 计算机

使用原生 Javascript 製作一个简单的 BMI 计算机：

BMI = 体重(公斤) / (身高(公尺) x 身高(公尺))

BMI计算网站

思考流程：

1.取出 按钮 input 关于身高和体重的值，然后再利用 公式 算出 BMI

在画面上印出结果。

2.根据 BMI 数值 判断 BMI 标準 在画面上印出结果。

3.製作一个按钮可以清空输入值

4.当输入值是空白时，按下计算时会跑出 视窗提醒要输入身高体重（防呆机制）

model (资料)> event (事件) > view (介面)

demo 网址

javascript 概念

function / if...else / scope / dom / event

函式「函式」指的是将一或多段程式指令包装起来，可以重複使用，也方便维护。宣告函式的方法有好几种，但不管是什么方式，通常一个函式会包含三个部分：在括号 ( ) 中的部分，称为「参数 (arguments) 」，参数与参数之间会用逗号 , 隔开在大括号 { } 内的部分，内含需要重複执行的内容，是函式功能的主要区块。

画面：

HTML 画面

 <section class="calculator">    <section class="fields">      <h1 >BMI 计算机</h1>           <div class="bmi_calcu">        <label for="bodyHeight">身高 :</label>        <input type="number" class="bodyHeight" min="0">CM                    <label for="bodyWeight">体重:</label>        <input type="number" class="bodyWeight" min="0">Kg      </div>      <div class="btn_block">      <input type="submit" value="计算"  class="calcualteBMI">       <i class="fas fa-undo reset" title="重新整理"></i>        </div>                 </div>    </section>    <section class="result">      <h2 class="result_txt">你的BMI：</h2>             <p id="bmiText"></p>      <p id="resultText">0</p>         </section>  <section class="bottom">          </section>    </section>

宣告DOM

// 宣告 DOMlet bmiText =document.querySelector('#bmiText');bmiText.style.display="none";//事件点击按钮 let btn =document.querySelector('.calcualteBMI');let reset =document.querySelector('.reset');

因为使用者点击了计算 取出了 身高和体重的值 并把它印出来。
利用事件监听 addEventListener

//事件监听btn.addEventListener('click',calculateBMI);

把 input 取出值，来做一个 function calculateBMI(){

}

function calculateBMI(){  let bodyWeight =document.querySelector('.bodyWeight').value;  //体重值  let bodyHeight =document.querySelector('.bodyHeight').value;   //身高值  let resultText =document.querySelector('#resultText');   //计算出BMI值  let bmiText =document.querySelector('#bmiText');  //  印出BMI标準   }

计算BMI

因为抓出来的值都是 value 是文字，我们需要把它变成数字
使用 parseInt() 变成整数，因为公分要转公尺，记得身高要除以100
因为得出来的值，产生很多小数，使用toFixed(2) 让小数点4捨5入只有2位。

function bmi(weight,height){ let w = parseInt(weight); let h = parseInt(height)/100;//因为公分要转公尺所以除以100 let bmi = (w/(h*h)).toFixed(2);//toFixed让小数点4捨5入只有2位 return bmi; //回传结果 }

防呆机制

当使用者没有输入数字时会跳出视窗提示，并不会在介面印出画面
把他放入在 calculateBMI()。

 if((bodyWeight !="" ) && (bodyHeight != ""))  {       //bmi标準可 画面显示     bmiText.style.display="block";     //计算结果     resultText.innerHTML = bmi(bodyWeight,bodyHeight);     //BMI标準计算结果     bmiText.innerHTML =   checkBMI(bmi(bodyWeight,bodyHeight));          }else{    bmiText.style.display="none";    alert("请输入身高体重！")    return  }

判断BMI标準

建立一个 叫做 checkBMI 的 funciton ，使用 if...else 来做判断，里面要放入参数才能判断。这个参数就是变数的意思，由前面的计算 BMI 公式 bmi(bodyWeight,bodyHeight）取得。

function checkBMI(bmi){     if( bmi < 18.5){    return "太轻了"    }else if( bmi >=18.5 &&  bmi < 24){    return "体重正常 "    }else if( bmi >=24 &&  bmi < 27){    return "过重 "    }else if( bmi >=27 &&  bmi < 30){    return "轻度肥胖 "    }else if( bmi >=30 &&  bmi < 35){    return "中度肥胖 "    }else if( bmi  >=35){    return "重度肥胖 "    } }

清空值

製作一个按钮 reset 可以使输入值都变归零，并不会影响到画面
把他放入一个叫做 undo 的 function。

function undo(e){ document.querySelector('.bodyWeight').value =''; document.querySelector('.bodyHeight').value =''; bmiText.style.display="none"; resultText.innerHTML = 0; return}// 事件监听reset.addEventListener('click',undo);

Javascript 程式码

//BMI = 体重(公斤) / (身高(公尺) x 身高(公尺)) // 计算功能写在外面，另外的功能应另外写出来。// 宣告 DOMlet bmiText =document.querySelector('#bmiText');bmiText.style.display="none";//事件点击按钮 let btn =document.querySelector('.calcualteBMI');let reset =document.querySelector('.reset');//计算BMIfunction bmi(weight,height){ let w = parseInt(weight); let h = parseInt(height)/100;//因为公分要转公尺所以除以100 let bmi = (w/(h*h)).toFixed(2);//toFixed让小数点4捨5入只有2位 return bmi; }// 取出输入值写入画面function calculateBMI(){  let bodyWeight =document.querySelector('.bodyWeight').value;  let bodyHeight =document.querySelector('.bodyHeight').value;  let resultText =document.querySelector('#resultText');  let bmiText =document.querySelector('#bmiText');  //  印出值来  if((bodyWeight !="" ) && (bodyHeight != "")){       bmiText.style.display="block";     resultText.innerHTML = bmi(bodyWeight,bodyHeight);     bmiText.innerHTML =  checkBMI(bmi(bodyWeight,bodyHeight));      }else{      bmiText.style.display="none";      alert("请输入身高体重！")      return  }      resultText.innerHTML = bmi(bodyWeight,bodyHeight); }//  bmi 範围function checkBMI(bmi){     if( bmi < 18.5){    return "太轻了"    }else if( bmi >=18.5 &&  bmi < 24){    return "体重正常 "    }else if( bmi >=24 &&  bmi < 27){    return "过重 "    }else if( bmi >=27 &&  bmi < 30){    return "轻度肥胖 "    }else if( bmi >=30 &&  bmi < 35){    return "中度肥胖 "    }else if( bmi  >=35){    return "重度肥胖 "    }   }//清空值function undo(e){ document.querySelector('.bodyWeight').value =''; document.querySelector('.bodyHeight').value =''; bmiText.style.display="none"; resultText.innerHTML = 0; return}//事件监听btn.addEventListener('click',calculateBMI);reset.addEventListener('click',undo);

资料来源：《JavaScript标準参考教程》、重新认识 JavaScript