javascript - 如何仅增加 2 个变量计数器而不是全部的速度

Question

我有 5 个递增时间计数器。我只想要 2 个柜台（用于销售）来提高他们在 onload 时的速度。鉴于我的代码结构如何，我该如何实现？

下面是我的js代码：

let hoursLabel= document.getElementById("hours");
let minutesLabel = document.getElementById("minutes");
let secondsLabel = document.getElementById("seconds");
let footwareSales =document.getElementById("footwareSales");
let footwareUnits = document.getElementById("footwareUnits");
let sneakersUnits= document.getElementById("sneakersUnits");
let sneakerSales=document.getElementById("sneakersSales");
let footwareSalesPerSecond =parseInt("8162");
let footwareUnitsPerSecond =parseFloat("388.7") ;
let sneakerSalesPerSecond=parseInt("2122");
let sneakerUnitsPerSeconds=parseInt("101");
let totalSeconds = 0;
let totalMinutes = 0;
let GlobalFootwareMarket=0;
let GlobalSneakerMarket=0;
let speed =100;   

setInterval(setTime, 1000);//every after one one second = 1000 milliseconds.

function setTime() {
  ++totalSeconds;
  GlobalFootwareMarket +=footwareSalesPerSecond;
  GlobalSneakerMarket += sneakerSalesPerSecond;
  footwareUnitsPerSecond +=footwareUnitsPerSecond/totalSeconds;
                sneakerUnitsPerSeconds+=sneakerUnitsPerSeconds/totalSeconds.toFixed(2); // trying to make this number be in 2 decimal places.

  secondsLabel.innerHTML = perSecond(totalSeconds % 60);
  minutesLabel.innerHTML = perSecond(parseInt(totalSeconds / 60));
  hoursLabel.innerHTML = perSecond(parseInt(totalMinutes)/60);

  footwareUnits.innerHTML=perSecond(++footwareUnitsPerSecond);
  sneakersUnits.innerHTML=perSecond(sneakerUnitsPerSeconds);
   sneakerSales.innerHTML=perSecond(GlobalSneakerMarket);
   footwareSales.innerHTML=perSecond(GlobalFootwareMarket);
  //speedUp(GlobalFootwareMarket,GlobalFootwareMarket);    
}

function perSecond(val) {
  let valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }

  /* function for speeding totals:
  function speedUp(GlobalSneakerMarket,GlobalFootwareMarket){
    if ((GlobalSneakerMarket || GlobalFootwareMarket) > 1000){
      sneakerSales.innerHTML=perSecond(GlobalSneakerMarket);
      footwareSales.innerHTML=perSecond(GlobalFootwareMarket);
      speed *=speed;
    setTimeout(setTime, speed);
  }else{

  }
}    */ 

}

这是我的 HTML 代码：（我不确定它是否对 att 有帮助）

<div>
            <label>H:M:S</label><br>
            <label id="hours">00</label>:<label id="minutes">00</label>:<label id="seconds">00</label>  <br>
          </div>

          <br>
          <div>
          <label>Total Global Footware Revenue per second $</label>
          <label id="footwareSales"></label><br>

            <label>Total Footware units sold per second</label> <label id="footwareUnits"></label><br>

          <label>Total Global Sneakers Revenue per second $</label>
            <label  id="sneakersSales"></label><br>
          <label  >Total sneakers units sold per second </label>
            <label id="sneakersUnits"></label>
          </div> 

我要更改的 2 个变量是 GlobalSneakerMarket 和 GlobalFootwareMarket

标签： javascripthtml

Answer 1

我认为要实现您想要的，我们需要使用外部类“CountUp”。

另外，快速说明：重复代码不容易维护。您可能希望使用函数来重现代码。

这是一个例子：

let hoursLabel = document.getElementById("hours");
let minutesLabel = document.getElementById("minutes");
let secondsLabel = document.getElementById("seconds");
//let footwareSales = document.getElementById("footwareSales");
let footwareUnits = document.getElementById("footwareUnits");
let sneakersUnits = document.getElementById("sneakersUnits");
//let sneakerSales = document.getElementById("sneakersSales");
let footwareSalesPerSecond = parseInt("8162");
let footwareUnitsPerSecond = parseFloat("388.7");
let sneakerSalesPerSecond = parseInt("2122");
let sneakerUnitsPerSeconds = parseInt("101");
let totalSeconds = 0;
let totalMinutes = 0;
let GlobalFootwareMarket = 0;
let GlobalSneakerMarket = 0;
let speed = 100;

const options = {
  useEasing: false,
  useGrouping: false,
};

/* Add two counters one for footWareSales and one for sneakersSales
CountUp function takes these arguments: 
// target = id of html element or var of previously selected html element where counting occurs
// startVal = the value you want to begin at
// endVal = the value you want to arrive at
// decimals = number of decimal places, default 0
// duration = duration of animation in seconds, default 2
// options = optional object of options (see below)

var CountUp = function(target, startVal, endVal, decimals, duration, options) {}
*/

let footwareSalesFrom = 0;
let sneakersSalesFrom = 0;
let footwareSalesTo = footwareSalesPerSecond;
let sneakerSalesTo = sneakerSalesPerSecond;


setInterval(function() {
  const footwareSales = new CountUp('footwareSales', footwareSalesFrom, footwareSalesTo, 0, 1, options);
  footwareSales.start();

  const sneakrsSales = new CountUp('sneakersSales', sneakersSalesFrom, sneakerSalesTo, 0, 1, options);
  sneakrsSales.start();

  footwareSalesFrom = footwareSalesTo;
  sneakersSalesFrom = sneakerSalesTo;

  footwareSalesTo += footwareSalesPerSecond;
  sneakerSalesTo += sneakerSalesPerSecond;
}, 1000);

setInterval(setTime, 1000); //every after one one second = 1000 milliseconds.

function setTime() {
  ++totalSeconds;
  // GlobalFootwareMarket += footwareSalesPerSecond;
  //GlobalSneakerMarket += sneakerSalesPerSecond;
  footwareUnitsPerSecond += footwareUnitsPerSecond / totalSeconds;
  sneakerUnitsPerSeconds += sneakerUnitsPerSeconds / totalSeconds.toFixed(2); // trying to make this number be in 2 decimal places.

  secondsLabel.innerHTML = perSecond(totalSeconds % 60);
  minutesLabel.innerHTML = perSecond(parseInt(totalSeconds / 60));
  hoursLabel.innerHTML = perSecond(parseInt(totalMinutes) / 60);

  footwareUnits.innerHTML = perSecond(++footwareUnitsPerSecond);
  sneakersUnits.innerHTML = perSecond(sneakerUnitsPerSeconds);
  //sneakerSales.innerHTML = perSecond(GlobalSneakerMarket);
  // footwareSales.innerHTML = perSecond(GlobalFootwareMarket);
  //speedUp(GlobalFootwareMarket,GlobalFootwareMarket);    
}

function perSecond(val) {
  let valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }

  /* function for speeding totals:
  function speedUp(GlobalSneakerMarket,GlobalFootwareMarket){
    if ((GlobalSneakerMarket || GlobalFootwareMarket) > 1000){
      sneakerSales.innerHTML=perSecond(GlobalSneakerMarket);
      footwareSales.innerHTML=perSecond(GlobalFootwareMarket);
      speed *=speed;
    setTimeout(setTime, speed);
  }else{

  }
}    */

}

<script src="https://cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.js"></script>
<div>
  <label>H:M:S</label><br>
  <label id="hours">00</label>:<label id="minutes">00</label>:<label id="seconds">00</label> <br>
</div>

<br>
<div>
  <label>Total Global Footware Revenue per second $</label>
  <label id="footwareSales">0</label><br>

  <label>Total Footware units sold per second</label> <label id="footwareUnits"></label><br>

  <label>Total Global Sneakers Revenue per second $</label>
  <label id="sneakersSales"></label><br>
  <label>Total sneakers units sold per second </label>
  <label id="sneakersUnits"></label>
</div>