Question

美好的一天，

请我还在学习绳索。我正在尝试制作一个自动计算器脚本来计算价格（根据数量给出的折扣）并在文本字段中显示结果。

我写了一个javascript，但它似乎不适用于我正在测试它的示例html页面。

<html>
        <p>price calculator ( Rate: N1.50 )</p>
        <br />
        <label for="units">Units:</label>
        <input name="units" type="text" id="units" value="1000" />
        <script type="text/javascript">

            var parray = "1000-9999:1.9; 10000-49999:1.8; 50000-99999:1.5; 100000-9999999:1.4; 10000000-0:1.4;";
            var prices = parray.split(';');

            var mins   = new Array();
            var maxs   = new Array();
            var rates  = new Array();

            for (var index in prices)
            {
                var price = prices[index];
                var m = price.split(':');
                if(m.length != 2) continue;
                var u = m[0].split('-');

                if(u.length == 2 && mins.length == maxs.length && maxs.length == rates.length)
                {
                    rates[rates.length] = parseFloat(m[1]);
                    mins[mins.length]   = parseFloat(u[0]);
                    maxs[maxs.length]   = parseFloat(u[1]);
                }
            }

            var pricemins = new Array();
            var pricemaxs = new Array();

            for(var i = 0; i < mins.length; i++)
            {
                pricemins[i] = rates[i]* mins[i];
                pricemaxs[i] = rates[i]* maxs[i];
            }


        $(document).ready(function(){

            $('#units').keyup(function(){

                    var units = parseInt($('#units').attr('value'));
                    var rate  = 0;
                    for(var i = 0; i < mins.length; i++)
                    {
                        if(units >= mins[i] && (units <= maxs[i] || maxs[i] == 0)) {
                            rate = rates[i];
                            break;
                        }
                    }

                    var amount = units * rate;
                    if(amount == NaN) amount = 0;
                    if(rate == 0)
                    {
                        $('#amount').attr('value', '--');
                        $('#price_rate').html('price calculator ( Rate: ? -- )');
                    }
                    else {
                        $('#amount').attr('value', amount.toFixed(2));
                        $('#price_rate').html('price calculator ( Rate: ?' + rate.toFixed(2) + ' )');
                    }
            });

            $('#units').keyup();

            /////////////////////////////

            $('#amount').keyup(function(){

                    var amount = parseInt($('#amount').attr('value'));
                    var rate   = 0;

                    for(var i = 0; i < pricemins.length; i++)
                    {
                        if(amount >= pricemins[i] && (amount <= pricemaxs[i] || pricemaxs[i] == 0)) {
                            rate = rates[i];
                            break;
                        }
                    }

                    var units = parseInt(amount/rate);
                    if(units == NaN) units = 0;

                    if(rate == 0)
                    {
                        $('#units').attr('value', '--');
                        $('#price_rate').html('price calculator ( Rate: ? -- )');
                    }
                    else {
                        $('#units').attr('value', units);
                        $('#price_rate').html('price calculator ( Rate: ?' + rate.toFixed(2) + ' )');
                    }
            });

            $('#amount').keyup();
          });
        </script>

        &nbsp;&nbsp;
        <label for="amount">Price: </label>
        <input name="amount" type="text" id="amount" style="width:100px" />
</html>

Answer 1

您需要在Html中查看页面结构。您需要的不仅仅是文档周围的标记。您似乎也在使用javascript框架jQuery中定义的方法。

至少，我认为您需要以下内容（来自：http://learn.jquery.com/about-jquery/how-jquery-works/，并进行修改，因此您无需下载jQuery库来测试它。）。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <!-- put your html here -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

    // Your code goes here.

    </script>
</body>
</html>

打破这种局面：在使用jQuery之前，您需要包含库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery是一个Javascript框架，它是一组方法和/或对象，可以简化和标准化Javascript在不同浏览器javascript实现中的使用。这会加载这些方法，以便您可以使用它们。

一旦你加载了jQuery，就可以像上面的例子一样使用javascript。你需要纠正其他海报提到的一些错误。

<script>

    // Your code goes here.

</script>

有关html5 http://www.w3.org/TR/html5-author/

的更深入信息

有关jQuery http://learn.jquery.com/

的更多信息

Answer 2

您可以使用jsfiddle.net来测试您的工作。我已将标记与JS分开，并将.keyUp()方法替换为.on()事件委派。但是，您的代码似乎存在一些问题，因为它仍然没有完全存在。希望这可以帮助您走上正确的道路：http://jsfiddle.net/3dRhn/

$('#units').on('keyup', function () {
    //etc
});

$('#amount').on('keyup', function () {
    //etc
});

如何正确集成这个Javascript

2 个答案: