代码之家 › 专栏 › 技术社区 › Silverburch

连续计数器中的数字格式问题

counter jquery

0

Silverburch · 技术社区 · 7 年前

出于某种原因,我的连续计数器用千位分隔符正确地显示了初始起始数字“65000”,但之后,它无法在每个计数上向起始数字添加200个增量。我想看的是

65,000, 65,200, 65,400, etc

我怀疑我仍在错误地使用我的千位分隔符格式化函数“numberwithcommas”。我试图从代码中的其他一些地方调用它,但没有任何效果。我也对如何将以前的文章改编成这段代码感到困惑。有点超出我的深度。有人能帮忙吗? https://jsfiddle.net/cs6hL4jy/

$(document).ready(function() {

  var StartNowTonnes = 6500000
  var timeVal = StartNowTonnes;

  $('.timer').html(timeVal);
  refreshTimer(); // Load timer function

  var timerInterval = 1000;
  var loadTimer = setInterval(refreshTimer, timerInterval);
});

//----------------------------

// FUNCTION Refresh Timer
function refreshTimer() {
  // Set counter
  setTimeout(function() {
    // Get timer value
    var myTime = parseInt($('.timer').html()) + 5;

    // If timer has not reached 0
    if (myTime > 0) {

      //$('.timer').html(myTime);
      var myTimeWithComma = numberWithCommas(myTime);
      $('.timer').html(myTimeWithComma);


    } else {
      $('.timer').html('Time up!');
    }
  }, 1);

}

//--------

function numberWithCommas(number) {
  var parts = number.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return parts.join(".");
}

.timer {
  background: #d2d8e8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer"></div>

0 回复 | 直到 7 年前

1

trincot 7 年前

您不应该将当前值从页面读取回变量。而是将值保存在内存中(即维护状态 )您当前的问题是ParseInt无法按预期解释数字。但如果你不依赖于解析这个数字,这个问题就变得无关紧要了。你自己创造了它,所以要跟踪它。也:

你不需要两者 setInterval 和 setTimeout
奇怪的是你增加然后仍然检查数字是否为正数,就好像它是倒计时一样。
您的代码以5递增,而不是以200递增
注释可能会有所帮助,但请避免放置完全不添加信息的注释。像“//function refresh timer”这样的函数实际上没有任何有用的信息。

$(document).ready(function() {
  var state = {
      timerInterval: 1000,
      myTime: 6500000,
      increment: 200
  };

  refreshTimer(state);
});

function refreshTimer(state) {
    var myTimeWithComma = numberWithCommas(state.myTime);
    $('.timer').html(myTimeWithComma);
    
    // If timer has not reached 0
    if (state.myTime > 0) {
        state.myTime += state.increment;
        setTimeout(() => refreshTimer(state), state.timerInterval);
    } else {
        $('.timer').html('Time up!');
    }
}

//--------

function numberWithCommas(number) {
  var parts = number.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return parts.join(".");
}

.timer {
  background: #d2d8e8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer"></div>