javascript - Javascript/JQuery – 几个问题，应该很简单

Question

尝试为我正在放置的登录页面做一些 jquery。我在 JS 上绝对是可怕的，所以请耐心等待。

这是我正在开发它的页面：

对于占位符图片下的旋转数字，我使用以下代码：

<script>

setInterval(function() {
  var min = 1000;
  var max = 100000;
  var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
  $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
  var newnumber = Math.round(number / .6);
  $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);
},
5000);

</script>

<div id="random_number"></div>

<div id="wtf"></div>

这个问题很少：

1）数字直到五秒钟才加载，我假设这是由于间隔。但是，如何在页面加载后立即开始显示/旋转数字？

2）当数字淡出时，较低的“标志”部分被提起，然后再下降。我猜这是因为<div>当淡出发生时消失，然后在再次淡入时又回来了。我能做些什么来防止这种情况发生？

最后，我还想在数字的开头添加一个美元符号，如果足够简单，可以在每三个数字中添加逗号。所以它看起来像这样：

93,029 美元 – 163,029 美元

感谢您的帮助，非常感谢！

编辑：

好吧，我想我可能知道问题是什么，在某种程度上......

所以当我有这个功能时：

function() {
  var min = 1000;
  var max = 100000;
  var firstnumber = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
  $('#random_number').text(firstnumber);
  var newnumber = Math.floor(firstnumber / .6);
  $('#wtf').text(newnumber);
}

然后尝试用调用它，页面上没有任何显示。但是当我使用这段代码时：

setInterval( function() {
  var min = 1000;
  var max = 100000;
  var firstnumber = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
  $('#random_number').text(firstnumber);
  var newnumber = Math.floor(firstnumber / .6);
  $('#wtf').text(newnumber);
},
5000);

它确实显示在页面上，但仅在 5 秒后。

所以我想知道为什么没有setInterval它不会出现在页面上？

score 2 · Accepted Answer

数字直到五秒才加载

原因是，您function() {var min ... (450);}只在5000几毫秒后执行。

代替：

setInterval(function() {
    var min = 1000;
    var max = 100000;
    var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
    $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
    var newnumber = Math.round(number / .6);
    $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);
},
5000);

和：

$(document).ready(function () {
  var min = 1000;
  var max = 100000;
  var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
  $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
  var newnumber = Math.round(number / .6);
  $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);

  setInterval(function() {
    var min = 1000;
    var max = 100000;
    var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
    $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
    var newnumber = Math.round(number / .6);
    $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);
  },
  5000);
}

我能做些什么来防止这种情况发生？

考虑使用opacity而不是，fadeOut因为它会从 DOM 中删除内容，这会给你带来跳转。
我还想在数字的开头添加一个美元符号

考虑使用jQuery Number Format，一个 jQuery 插件，它做的事情和你期望的一样。

javascript - Javascript/JQuery – 几个问题，应该很简单

1 回答 1

Related

Reference