简单的计算器没有页面重新加载


Simple Calculator without page reload

我有两个输入框,第一个输入框将接受一个值,该值将从存储在cookie中的值中减去。第二个输入将在我输入时自动生成差异。

这个问题的最佳解决方案是什么?

最好的解决方案是只使用 Javascript

你可以直接从Javascript中读取cookies:

http://www.quirksmode.org/js/cookies.html

您可以使用readonly attribute: 使第二个输入不可编辑

http://www.w3schools.com/tags/att_input_readonly.asp

你可以直接在第一个输入的 onkeyup事件中做数学运算:

http://www.w3schools.com/jsref/event_onkeyup.asp

将keyup和mouseup事件挂接在第一个输入框上。在处理程序中对其值执行parseInt(), if !isNaN()计算差值并将其写入第二个输入框。

我不明白,为什么你需要ajax的减法!

由于cookie可以由JavaScript创建、读取和删除,因此可以使用JavaScript完成此任务。正如Eugen Rieck所指出的,你可以使用up/down事件

你只需要Javascript。使用服务器端(PHP|PYTHON|JAVA|PERL)只有当你需要将它存储在服务器上。或者想要向其他人展示结果。

对于您的情况,服务器端只需要:

  1. 将其存储在服务器上,以便其他人可以看到。
  2. 多用户减法?
  3. 记录访问者做了什么
<script>
function subtract(first, second)
{
    total = first - second;
    obj("total").value = total;
}
function obj(id)
{
    return document.getElementById(id);
}
</script>
<input type="text" id="first" onkeyup="javascript:subtract(this.value, obj('second').value)" />
-
<input type="text" id="second" onkeyup="javascript:subtract(obj('first').value, this.value)"/>
=
<input type="text" id="total"/>