标签：计算器 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>
标签：计算器 read value 绑定 function 页面 函数 result htm
原文地址：http://www.cnblogs.com/iCodingLife/p/7290689.html
