Javascript 即时计算

Question

我是 JS 的初学者，正在努力自学。我希望我不会在这里受到抨击，但 Whosebug 看起来仍然是提问的地方。

我有这个计算代码并且可以使用。但我想将提示更改为输入并使用提交按钮在其他输入上显示结果。

或者！如果在用户键入数字时即时进行计算，那将是多么令人惊奇的事情（我什至不确定这是否可能。）

提前致谢，这是我目前的 JS 代码：

var incomePerYear = prompt("Income per year: ");

var perYear = parseFloat(((incomePerYear) * 1 / 100) - (incomePerYear * 6 / 1000));

var perMonth = parseFloat(perYear / 12);

document.write("Income per year: " + perYear.toLocaleString('se') + "<br>");

document.write("Income per month: " + perMonth.toFixed(4));

Answer 1

您可以使用事件 onkeyup 进行即时计算。

顺便说一句，parseFloat 一个数字是多余的。

function calculate(incomePerYear) {
    var perYear = incomePerYear / 100 - incomePerYear * 6 / 1000,
        perMonth = perYear / 12;

    document.getElementById('year').innerHTML = perYear.toLocaleString('se');
    document.getElementById('month').innerHTML = perMonth.toFixed(4);
}

<p>Income per year: <input onkeyup="calculate(this.value)" type="text"></p>
<p>Income per year: <span id="year"></span></p>
<p>Income per month: <span id="month"></span></p>

Answer 2

你可以试试这个。可能您需要验证输入以确保它是一个数字。

<input type="text" id="incomeperyear">
<div id="perYear"></div>
<div id="perMonth"></div>

<script type="text/javascript">
    $(function(){

             $('#incomeperyear').on('focus keyup change', function(){
              var incomePerYear = $(this).val();
              var perYear = parseFloat(((incomePerYear) * 1 / 100) - (incomePerYear * 6 / 1000));
              var perMonth = parseFloat(perYear / 12);
              $("#perYear").text('perYear :'+' '+perYear.toLocaleString('se'));
              $("#perMonth").text('perMonth :'+' '+perMonth.toFixed(4));

        });
        })
</script>

即使您将号码复制到其他地方也能正常工作。

https://jsfiddle.net/c982myft/

Javascript 即时计算

Javascript calculation on the fly

javascript

calculation