JavaScript的math.round并在IE和Opera但不是浏览器,Safari或Fire

2019-10-29 08:00发布

看看这个小提琴:

http://jsfiddle.net/gD3ax/1/

或以下是完整的标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Calculator</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .header {
            font-size: 10pt;
            color: white;
            font-weight: 700;
            text-decoration: none;
            text-underline-style: none;
            text-line-through: none;
            font-family: Arial;
            border-top: .5pt solid #C4D79B;
            border-right: none;
            border-bottom: .5pt solid #C4D79B;
            border-left: .5pt solid #C4D79B;
            background: #9BBB59;
            mso-pattern: #9BBB59 none;
            padding: 5px;
            display: block;
            width:138px;
            text-align: center;
        }
        .drop {
            width: 150px;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        function calculate() {
            // 'improve' Math.round() to support a second argument
            var _round = Math.round;
            Math.round = function (number, decimals /* optional, default 0 */ ) {
                if (arguments.length == 1)
                    return _round(number);

                var multiplier = Math.pow(10, decimals);
                return _round(number * multiplier) / multiplier;
            }

            /* examples
            Math.round('123.4567', 2); // => 123.46
            Math.round('123.4567');    // => 123
            */

            msfPlanA = 25.00;
            msfPlanB = 50.00;
            msfPlanC = 79.99;

            minPlanA = 500;
            minPlanB = 1700;
            minPlanC = 3000;

            smsPlanA = 200;
            smsPlanB = 600;
            smsPlanC = 1000;

            dataPlanA = 100;
            dataPlanB = 250;
            dataPlanC = 500;

            plan = document.getElementById("plans").options.value;
            days = document.getElementById("days").options.value;

            if (plan == "Plan A") {
                document.getElementById("msf").value = ('$' + Math.round(msfPlanA / 30 * days, 2));
                document.getElementById("min").value = (Math.floor(minPlanA / 30 * days) + ' minutes');
                document.getElementById("sms").value = (Math.floor(smsPlanA / 30 * days) + ' texts');
                document.getElementById("data").value = (Math.floor(dataPlanA / 30 * days) + ' MBs');
            } else if (plan == "Plan B") {
                document.getElementById("msf").value = ('$' + Math.round(msfPlanB / 30 * days, 2));
                document.getElementById("min").value = (Math.floor(minPlanB / 30 * days) + ' minutes');
                document.getElementById("sms").value = (Math.floor(smsPlanB / 30 * days) + ' texts');
                document.getElementById("data").value = (Math.floor(dataPlanB / 30 * days) + ' MBs');
            } else {
                document.getElementById("msf").value = ('$' + Math.round(msfPlanC / 30 * days, 2));
                document.getElementById("min").value = (Math.floor(minPlanC / 30 * days) + ' minutes');
                document.getElementById("sms").value = (Math.floor(smsPlanC / 30 * days) + ' texts');
                document.getElementById("data").value = (Math.floor(dataPlanC / 30 * days) + ' MBs');
            }
        }
    </script>
    <form action="">
        <table>
            <tbody>
                <tr>
                    <td>    <span class="header">How many days?</span>

                    </td>
                    <td>    <span class="header">Which plan?</span>

                    </td>
                </tr>
                <tr>
                    <td width="120px">
                        <select class="drop" id="days">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                        </select>
                    </td>
                    <td>
                        <select class="drop" id="plans">
                            <option value="Plan A">Plan A</option>
                            <option value="Plan B">Plan B</option>
                            <option value="Plan C">Plan C</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" value="Submit" onclick="calculate()" />
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <br />
        <table>
            <tbody>
                <tr>
                    <td>    <span class="header">Prorated MSF</span>

                    </td>
                    <td>    <span class="header">Minutes</span>

                    </td>
                    <td>    <span class="header">SMS</span>

                    </td>
                    <td>    <span class="header">Data</span>

                    </td>
                </tr>
                <tr>
                    <td>
                        <input size="19" type="text" id="msf" value="Prorated MSF" readonly="readonly" />
                    </td>
                    <td>
                        <input size="19" type="text" id="min" value="Prorated Minutes" readonly="readonly" />
                    </td>
                    <td>
                        <input size="19" type="text" id="sms" value="Prorated SMS" readonly="readonly" />
                    </td>
                    <td>
                        <input size="19" type="text" id="data" value="Prorated Data" readonly="readonly" />
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

它在IE和Opera但不是浏览器,Safari或Firefox正常工作。 在Chrome,Safari和Firefox,我得到NaN ,而不是实际值。 建议?

我需要在所有的5级主要的浏览器来得到这个工作。

提前致谢!

Answer 1:

回答只是这样没有人需要我的评论

document.getElementById("plans").value

不.options.value天同上



Answer 2:

您的“选项”的使用是不正确的,这是令人惊讶,为什么它在某些情况下。

var x = document.getElementById("plans").selectedIndex;
plan = document.getElementById("plans").options[x].value;

选择返回一组选项,你需要选择的一处。



文章来源: javascript math.round and math.floor work fine in IE and Opera but not Chrome, Safari or Firefox. Getting NaN