js之简单加法计算器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js之简单加法计算器相关的知识，希望对你有一定的参考价值。
在页面中做了一个简单的加法计算器，实现实时计算输入的数值：
<!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之简单加法计算器的主要内容，如果未能解决你的问题，请参考以下文章