Question

我有5个递增时间计数器。我只希望2个柜台（用于Sales）在onload时提高其速度。鉴于我的代码结构如何，该如何实现？

这是下面的我的js代码：

 <!-- https://mvnrepository.com/artifact/com.google.apis/google-api-services-sheets -->
        <dependency>
            <groupId>com.google.apis</groupId>
            <artifactId>google-api-services-sheets</artifactId>
            <version>v4-rev1-1.21.0</version>
        </dependency>
        <dependency>
            <groupId>com.google.gdata</groupId>
            <artifactId>core</artifactId>
            <version>1.47.1</version>
        </dependency>

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

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{

  }
}    */ 

}

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

Answer 1

您可以定义“最大级别” 变量，并在函数内添加if语句。我将它们的最大值定义为100,000。看例子：

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 GlobalFootwareMarketMaxLevel = 100000; // Max level variables
let GlobalSneakerMarketMaxLevel = 100000;
let speed = 100;

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

function setTime() {
  ++totalSeconds;
  // IF statement to control GlobalFootwareMarket max level
  if(GlobalFootwareMarket <= GlobalFootwareMarketMaxLevel) GlobalFootwareMarket += footwareSalesPerSecond;
  // IF statement to control GlobalSneakerMarket max level
  if(GlobalSneakerMarket <= GlobalSneakerMarketMaxLevel) 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{
     
  }
}    */

}

<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>

Answer 2

我认为要实现您想要的目标，我们需要使用外部类“ 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>

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

2 个答案: