標籤:計算機 read value 綁定 function 頁面 函數 result htm
在頁面中做了一個簡單的加法計算機,實現即時計算輸入的數值:
<!DOCTYPE HTML><html><head><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">$(document).ready( function(){ //定義一個通用的合計函數 function compute(arrName,resultName){ var result = 0 ; for(var i = 0 ; i < arrName.length; i++){ result +=Number($(‘input[name=‘+arrName[i]+‘]‘).val() ); } $(‘input[name=‘+resultName+‘]‘).val(result); } //定義輸入 var arrName = [‘num1‘,‘num2‘]; //存放計算結果 var resultName = ‘result‘; //將compute綁定到每一個輸入框的blur事件 for(var i = 0 ; i < arrName.length; i++){ $("input[name="+arrName[i]+"]").on(‘keydown‘,{arrName:arrName,resultName:resultName},function(e){ compute(arrName,resultName); // debugger; }); } } );</script></head><body> <center> <input type="text" name="num1" value="15" style = ‘width:34px;height:34px‘ /> + <input type="text" name="num2" value="6" style=‘width:34px;height:34px‘/> =<input type="text" name="result" value="" readonly="true" style=‘background-color:lightgray;width:34px;height:34px‘/> </center></body></html>
js之簡單加法計算機