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) 数値は 5 秒まで読み込まれません。これは、間隔が原因であると想定しています。しかし、ページが読み込まれるとすぐに数字の表示/回転を開始するにはどうすればよいですか?

2) 数字がフェードアウトすると、下部の「ロゴ」セクションが表示され、その後再び表示されます。これは<div>、フェードアウトが発生すると消え、再びフェードインすると戻ってくるためだと思います。これを防ぐにはどうすればよいですか？

最後に、数字の先頭にドル記号を追加したいと思います。簡単な場合は、3 つの数字ごとにコンマを挿入します。したがって、次のようになります。

$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

数字は 5 秒以内に読み込まれません

その理由は、ミリ秒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);
}

これを防ぐにはどうすればよいですか？

DOM からコンテンツを削除するため、opacity代わりに使用することを検討してください。これにより、ジャンプが可能になります。fadeOut
また、数字の先頭にドル記号を追加したいと思います

jQuery プラグインであるjQuery Number Formatの使用を検討してください。これは、期待どおりのことを行います。

javascript - Javascript/JQuery – いくつかの質問、簡単なはずです

1 に答える 1

Related

Reference