js之简单加法计算器
2021-06-11 23:02
标签：计算器 read value 绑定 function 页面 函数 result htm 在页面中做了一个简单的加法计算器，实现实时计算输入的数值： js之简单加法计算器 标签：计算器 read value 绑定 function 页面 函数 result htm 原文地址：http://www.cnblogs.com/iCodingLife/p/7290689.htmlDOCTYPE 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>