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

Question

尝试为我正在建立的登陆页面执行一些jquery。我在 JS 方面实在是太糟糕了，所以请耐心等待。

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

http://kickstartyourbiz.info/

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

<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) 当数字淡出时，下部的“ Logo ”部分会升起，然后又降下来。我猜这是因为 <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它不会显示在页面上？

Answer 1

1. 五秒后才会加载数字

   原因是，您仅在 5000 毫秒后执行 function() {var min ... (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);
   

   与:

   $(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);
   }
   

2. 我可以采取什么措施来防止这种情况发生？

   考虑使用 opacity 而不是 fadeOut，因为它会从 DOM 中删除内容，从而为您提供跳转。

3. 我还想在数字开头添加美元符号

   考虑使用jQuery Number Format ，一个 jQuery 插件，它的作用与您所期望的相同。