# jQuery應用 - BMI計算機 (2) ## bmi.html ```htmlmixed= <!doctype html> <html lang="zh-TW"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- 引用自已定義的CSS --> <link rel="stylesheet" href="./css/temp.css"> <title>BMI 計算機</title> </head> <body> <div class="container"> <!-- 標題 --> <div class="row"> <div class="col"> <div class="jumbotron"> <h1 class="display-4">BMI 計算機</h1> </div> </div> </div> <!-- 表單 --> <div class="row"> <div class="col"> <form> <div class="form-group row"> <label for="inputHeight" class="col-sm-2 col-form-label">身高(cm)</label> <div class="col-sm-10"> <input type="number" class="form-control" id="inputHeight" placeholder="請輸入身高" value="185"> </div> </div> <div class="form-group row"> <label for="inputWeight" class="col-sm-2 col-form-label">體重(kg)</label> <div class="col-sm-10"> <input type="number" class="form-control" id="inputWeight" placeholder="請輸入體重" value="85"> </div> </div> <div class="form-group row"> <div class="col-sm-10"> <button id="main" type="button" class="btn btn-primary">計算</button> </div> </div> <div class="form-group row"> <label for="outputBMI" class="col-sm-2 col-form-label">BMI</label> <div class="col-sm-10"> <input type="number" readonly class="form-control-plaintext" id="outputBMI" placeholder="BMI的值"> </div> </div> </form> </div> </div> <div class="row"> <div class="col"> <footer> copyright &copy; 2019 前端程式設計 </footer> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- 引用自己寫的 js --> <script src="./js/bmi.js"></script> </body> </html> ``` ## temp.css ```css= .jumbotron { background-color: #334ddf; color: #FFFFFF; } footer { text-align: center; color: #666; border-top: 1px solid; padding-top: 30px; } ``` ## bmi.js ```javascript= // 當HTML文件載入完成時執行 $(() => { // 這裡就是程式的開始 console.log('JS 正常執行') // 當 id=main 的 html element 被按到的時候執行 $('#main').on('click', () => { console.log('按到了喔') // 輸入 var height = $('#inputHeight').val() var weight = $('#inputWeight').val() // 計算BMI var h = Number(height) / 100 var w = Number(weight) var hh = h * h var bmi = w / hh // 輸出 $('#outputBMI').val(bmi) }) }) ``` ###### tags: `前端程式設計` `108-1`