在页面中做了一个简单的加法计算器，实现实时计算输入的数值：
<!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>
时间： 2024-08-06 07:51:32