Question

尝试为我正在建立的目标网页做一些jquery。我对JS非常可怕，所以请耐心等待。

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

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

<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会在页面上显示它？

Answer 1

数字直到五秒才加载

原因是，您只能在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 / JQuery - 几个问题，应该很简单

1 个答案: