首页 > Web开发 > 详细

js之简单加法计算器

时间:2017-08-05 17:34:32      阅读:152      评论:0      收藏:0      [点我收藏+]

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

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

原文:http://www.cnblogs.com/iCodingLife/p/7290689.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!