jquery中使用文本框的简单计算

A simple calculation with text box in jquery

本文关键字：简单 计算 文本 jquery      更新时间：2024-01-05
<!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 中为相机镜头开发一个简单的移动计算器。计算非常简单，但我无法使其工作。需要一些帮助。

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

您应该决定何时进行计算，可能是当lens字段中的值更改时，或者当您按下某个按钮或您决定的其他逻辑时。

这是将某些操作绑定到事件的方式(在本例中keyup应用于lens字段(注意lens字段的id(

 $("#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/

相关文章：