放一个假的加载屏幕给人的印象是计算需要时间？

Question

我正在编写我的第一个Javascript程序。我是这种编程语言的新手，所以如果你能让答案变得简单，我会非常感激，这样我才能理解它们。

这是我的代码： http://jsfiddle.net/7Tfwh/1/

function temp(form) {
var umsatz = parseFloat(form.umsatz.value, 10);
var ebit = parseFloat(form.ebit.value, 10);
umsatzrendite = (ebit / umsatz)*100 + "%";
form.umsatzrendite.value = umsatzrendite;
};

所有这一切都是从表单中取出2个变量并将它们分开并返回结果。 我想使用更多的变量，但计算将很快完成。因此，我想给用户留下一个印象，即计算非常复杂，需要几秒钟才能发布结果。

因此，我希望在用户按下“计算”-Button之后立即使用加载屏幕3到5秒，当然在获得结果之前。

如果有人能指出我正确的方向，那会很好。

谢谢。

乔治

Ninjaedit： 顺便说一句我不知道为什么Jsfiddle-Version不能正常工作。在我的本地环境中，计算正确完成。

Answer 1

最简单的方法是;当用户点击按钮时：

1. show a div包含加载图片等（提示：使用jQuery library）
2. 开始timer
3. 当计时器结束时：
   • 隐藏div
   • 执行以上功能

Answer 2

按下计算按钮后，您可以使用window.setTimeout功能在2到3秒后调用计算数学运算。

您可以找到有关以下内容的更多信息： http://www.w3schools.com/js/js_timing.asp

如果不清楚，请告诉我。可以为您提供相同的工作示例。您也可以在链接上自己尝试。

Answer 3

}另一种方法是使用jQuery库添加一个简单的效果。您应该更改背景颜色，不透明度或其他值以提供计算或动态加载的效果。

// change the background color to pink over 2 seconds
// ...then change it back to white
$(form).animate({backgroundColor : "pink"}, 2000).delay(2000).animate({backgroundColor : "white"}, 2000);

Answer 4

我告诉你我是如何解决它的。

我用window.setTimeout ...

尝试了这个东西

出于某种原因，我无法使用它与我的javascript ...只有问题......所以我使用jquery的.delay选项...感谢上帝，jquery是如此简单...

在这里你可以看到我的结果：

http://phptest.klea.internetshop.cc