前端筆記47——利用JavaScript計算兩個數的差
阿新 • • 發佈：2019-01-05
需求
在兩個輸入框中輸入兩個數字，點選按鈕的時候，計算出兩個數字的差並且顯示到id為result的div中。
實現程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ padding-top: 100px; text-align: center; } #result{ width: 50%; height: 100px; margin: 0 auto; border: 1px solid #ccc; } </style> </head> <body> <input type="text" id="ipt1"/> <input type="text" id="ipt2"/> <button id="btn">計算</button> <div class="result"></div> <script type="text/javascript"> // 得到input裡面的值，然後拿到減，把結果放到div中 // input.value div.innerHTML 事件繫結 // 找物件 input button div var oIpt1 = document.getElementById("ipt1") var oIpt2 = document.getElementById("ipt2") var oBtn = document.getElementById("btn") var oBox = document.getElementById("result") // 事件函式繫結 oBtn.onclick = function(){ // 計算input裡面數字的差 然後放到div中 var num1 = oIpt1.value var num2 = oIpt2.value var result = num1-num2 // 給div設定一個內容 result oBox.innerHTML = result } </script> </body> </html>
上面程式碼實現剛開始說的需求，希望對學習前端開發的小夥伴有幫助。