Dynamic counting

[AlphaX2018]

Hi,

This counter is almost exactly what I was looking for.

However, I'd need the counter to be dynamic, i.e. have the number increase every day autmatically. Unfortunately, my knowledge is limited to HTML, CSS and bit of PHP, so I'm unsure how to amend the script for this purpose.

Could anyone provide me with guidance how to amend this script to make the count increment on a daily basis by a set number (or ideally even by a random number within a given range)?

I'd truly appreciate any help!

Many thanks

[inorganik]

Hey there, countUp.js is designed for doing short counting animations... maybe from like 1-10 seconds long. If you are doing something like a day counter, you would need to do that using Date(). For instance, to display "X days until Christmas" you would do

const today = new Date();
const xmas = new Date('2020-12-25T00:00:00Z');
const diff = xmas.getTime() - today.getTime();
const days = diff / (1000* 60 *60 *24);
console.log(`${Math.round(days)} days until Christmas!`);

Or, maybe you wanted something completely different. In any case, hope that helps.

[AlphaX2018]

Hi @inorganik

Thanks so much for your prompt answer!

Apologies for not being clearer about what I'm after. Let me try to explain with more detail and followed with an example:

Description

1. at the moment you can set a fixed (static) number and the counter will run up to that number upon page load
2. however, this static number will always be the same on every page visit
3. I'm in need for a dynamic number that is not static but changes given a certain criteria
4. my criteria would be to have the number counted to, to be increased every day by an added number from a range

Example:
You want to create a counter that shows a number of patients treated / day. You know you treat 1-3 patients per day, so your counter number needs to increase every day by a random number from a range of 1-3. So you may end up with the following sequence:
Day 1: 5,000
Day 2: 5,000 + 2 = 5,002
Day 3: 5,200 + 1 = 5,003
Day 4: 5,003 + 3 = 5,006
and so on..

I hope this makes more sense.

Thanks a lot for your help and this helpful script. Truly appreciated!

[inorganik]

In that case - you are still doing the same thing based on date but for the end value. If you have

const numAnim = new CountUp('targetId', endVal);

endVal would be calculated based on number of days since X date, similar to the christmas example above. Make sense?

[AlphaX2018]

I think I understand what you are saying conceptually but I'm confused how I'd have to amend your code above in that regard.

I'd be quite grateful if you could explain in more detail, how I'd have to tailor it for my intended solution.

Thank you very much Jamie!

[Andre601]

I'm looking for something similar, but where I get the number from an external Website that returns a JSON output.

I have the following setup as of now:

import { CountUp } from './countup.min.js';

window.onload = function(){
    const options = {
        duration: 5,
        suffix: '+'
    };
    
    // example.com/json is... well... an example. It would return JSON with "number" as key.
    const count = fetch('https://example.com/json', {
        headers: { "Content-Type": "application/json" }
    }).then(res => res.json()).then(d => d.number);
    
    console.log(count);
    
    const countUp = new CountUp('counter', count, options);
    countUp.start();
}

The browser console is returning the following info:

Promise {<pending>}
  [[Prototype]]: Promise // This contains more info that I left out.
  [[PromisState]]: "fulfilled"
  [[PromiseResult]]: 69222

I never worked with Promises or JS on such a level, so if someone could give me a helping hand here would I really appreciate this.
This is for browsers if it was unclear.

[m7ess5]

I have made a variation so that it shows an incremental updated number, every 2 seconds, based on a preset final number to reach fully on a certain date.

Final Date = December 1, 2021
Final Number = 1,000,000

Between dates examples:
Oct 1, it will be starting displaying 0, then increase every 2 seconds
Nov 1 will show 500,000, then increase every 2 seconds
Nov 15 will show 750,000, then increase every 2 seconds
Dec 1 will stop at 1,000,000

Refreshing the page will show the counter starting where it was at, before refreshing.

  var counter = 0;
  var loopInt = 2000;
  const finishNumbers = 1000000;
  const startingNumbers = 0;
  var numCount = 0;

  var i = setInterval(function(){
      var numCountDiff = numCount;
      var numDiff = finishNumbers - startingNumbers;
      var todayTime = new Date();
      const endTime = new Date('2021-12-01T00:00:00Z');
      var diffTime = endTime.getTime() - todayTime.getTime();
      var days = diffTime / (1000* 60 *60 *24);
      var diffTimeSeconds = Math.round(diffTime / (1000));
      console.log(`${diffTimeSeconds} seconds (`+Math.round(days).toFixed(2)+` days) until ${finishNumbers}!`);
      numCount = startingNumbers +  ((numDiff/diffTimeSeconds));
      numCountDiff = numCount - numCountDiff;
      console.log(Math.round(numCountDiff).toFixed(2), "nums added");
      counter++;
      if(counter === 100 || ((numCount === finishNumbers)) ) {
          clearInterval(i);
          window.loopfetch( finishNumbers );
      } else {
        window.loopfetch( Math.round(numCount) );
      }
  }, loopInt);

  window.loopfetch=function (evt) {
    console.log("evt = "+evt);
    code += "<br>demo.update(" + evt + ");";
    codeVisualizer.innerHTML = code;
    demo.update(evt);
  };

The loop, set at 2000 milliseconds, will stop at 100 executions and when it reaches the Final Number on December the 1st.