首页 > 代码库 > js之简单加法计算器

js之简单加法计算器

2024-11-18 08:42:01   202人阅读

在页面中做了一个简单的加法计算器，实现实时计算输入的数值：

<!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之简单加法计算器


联系
我们