在jquery中使用文本框进行简单计算

时间:2015-02-17 14:23:49

标签: javascript jquery

<!DOCTYPE html> 

            <html>
            <head>
            <meta charset="utf-8">
            <title>jquery Mobile Web App</title>
            <link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
            <script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
            <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>

            <script>

            $(document).ready(function(){
                var lens = $('#lens').val();

            //var fullframe = 0;  // initialize the sum to zero
             var fullframe = 600/lens;
                $('#fullframe').val(fullframe);
            var fullframe = 600/lens;
            var apsccanon = 600/(lens*1.6);
            var apscnikon = 600/(lens*1.5);
            $('#fullframe').val(fullframe);
            $('#apsccanon').val(apsccanon);
            $('#apscnikon').val(apscnikon);

            });
            </script>

            </head> 
            <body> 

            <div data-role="page" id="page">
                <div data-role="header">
                    <h1>Rule 600</h1>
                </div>
                <div data-role="content">   
                    Rule 600 Calculator
                </div>


                <div>
                <form action="">
             Lens:<br>
            <input type='text' id='fullframe' />
            <br>
            Full Frame:<br>
            <input type='text' id='fullframe' value=""/>
            <br>
             APSC Canon:<br>
            <input type='text' id='apsccanon' value="" />
            <br>
             APSC Nikon:<br>
            <input type='text' id='apscnikon' value="" />
            <br>
            </form> 
            </div>


                <div data-role="footer">
                    <h4>Footer</h4>
                </div>
            </div>
            </div>

            </body>
            </html>

尝试在Dreamweaver 5.5中为相机镜头开发一个简单的移动计算器。计算很简单,但我无法使其工作。需要一些帮助。

2 个答案:

答案 0 :(得分:0)

您有重复id。每个元素都应该有unique IDs

答案 1 :(得分:0)

您应该决定何时进行计算,可能是lens字段中的值发生变化,或者按某个按钮或您决定的其他逻辑时。

这是您可以将某些操作绑定到事件的方式(在这种情况下keyup应用于lens字段(请注意id字段的lens

 $("#lens").on("keyup", function () {
        var lens = $(this).val();
        //var fullframe = 0;  // initialize the sum to zero
        var fullframe = 600 / lens;
        $('#fullframe').val(fullframe);
        var fullframe = 600 / lens;
        var apsccanon = 600 / (lens * 1.6);
        var apscnikon = 600 / (lens * 1.5);
        $('#fullframe').val(fullframe);
        $('#apsccanon').val(apsccanon);
        $('#apscnikon').val(apscnikon);
    });

您可能想要添加一些关于镜头字段中插入的值的控件(例如0会因为被除零而将所有计算字段填充到NaN

示例:http://jsfiddle.net/sczomaqs/