Show a portion of decimal numbers without altering their true numerical values

Question

Show a portion of decimal numbers without altering their true numerical values

Currently, I am immersed in a web project that involves incrementation animations. To achieve this, I have devised a counter function similar to the one shown below:

const counters = document.querySelectorAll('.counter');

    counters.forEach(counter => {
        const updateCount = () => {
            const target = +counter.getAttribute('data-target');
            const count = +counter.innerText;

            const speed = target / 1000; //this will not work accurate if using Math.ceil or floor to round number up
           
            if (count < target) {
                counter.innerText = count + speed;
                setTimeout(updateCount,1);
            } else {
                counter.innerText = target;
            }
        }
        updateCount();
    });

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html , body {
  width: 100%;height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
/* HEADER */

.counter {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}

<span data-target="20" class="counter">0</span>
    <span data-target="100" class="counter">0</span>
    <span data-target="50" class="counter">0</span>
    <span data-target="250000" class="counter">0</span>

The challenge lies in the fact that the numbers displayed on the website are in decimal format. Various attempts such as math.ceil,math.floor, ... were made to rectify this issue but they interfered with the speed of the counter. Is there any method to solely display the integer portion WITHOUT affecting the speed?

javascript html css

Answer 1

Answer №1

When calling the function, be sure to pass in the updated value rather than relying on the current printed value.

Check out the code comments for more details.

const counters = document.querySelectorAll('.counter');

    counters.forEach(counter => {
  
        /* Make sure to provide a parameter */
        const updateCount = (count) => {
            const target = +counter.getAttribute('data-target');

            /* On initial function call without an argument,
             * use the innerText value. Otherwise, use the argument
             * by changing 'const' to 'var'
             */
            var count = count || +counter.innerText;

            const speed = target / 1000;
            
            
            if (count < target) {

                /* Use parseInt() when updating the value to keep
                 * only the integer part
                 */
                counter.innerText = parseInt(count + speed, 10);

                /* Call the function with the original sum of
                 * count + speed
                 */
                setTimeout(function() {
                  updateCount(count+speed)
                }, 1);

            } 
            else {
                /* Utilize parseInt() */
                counter.innerText = parseInt(target, 10);
            }
        }
        updateCount();
    });

  
.counter {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  display: block;
}

<span data-target="20" class="counter">0</span>
<span data-target="100" class="counter">0</span>
<span data-target="50" class="counter">0</span>
<span data-target="250000" class="counter">0</span>

Additionally, consider passing a second target argument to the function instead of repeatedly accessing the DOM for its value, similar to how it's done for count, as it remains constant.

Answer 2

When calling the function, be sure to pass in the updated value rather than relying on the current printed value.

Check out the code comments for more details.

const counters = document.querySelectorAll('.counter');

    counters.forEach(counter => {
  
        /* Make sure to provide a parameter */
        const updateCount = (count) => {
            const target = +counter.getAttribute('data-target');

            /* On initial function call without an argument,
             * use the innerText value. Otherwise, use the argument
             * by changing 'const' to 'var'
             */
            var count = count || +counter.innerText;

            const speed = target / 1000;
            
            
            if (count < target) {

                /* Use parseInt() when updating the value to keep
                 * only the integer part
                 */
                counter.innerText = parseInt(count + speed, 10);

                /* Call the function with the original sum of
                 * count + speed
                 */
                setTimeout(function() {
                  updateCount(count+speed)
                }, 1);

            } 
            else {
                /* Utilize parseInt() */
                counter.innerText = parseInt(target, 10);
            }
        }
        updateCount();
    });

  
.counter {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  display: block;
}

<span data-target="20" class="counter">0</span>
<span data-target="100" class="counter">0</span>
<span data-target="50" class="counter">0</span>
<span data-target="250000" class="counter">0</span>

Additionally, consider passing a second target argument to the function instead of repeatedly accessing the DOM for its value, similar to how it's done for count, as it remains constant.

Answer 3

Answer №2

When using the same value for calculation and display, rounding off can result in losing precision. For example, if 1.3 + 3 = 4.3 on the first iteration, then on the next iteration, 4.3 will be rounded up to 5 and the sum would become 5 + 3. This discrepancy can make the speed appear inconsistent.

To address this issue, adding a hidden attribute called count-value to the span allows you to store the full number with all decimals for calculations. You can then display the number without decimals to users without affecting the sum.

const counters = document.querySelectorAll('.counter');

    counters.forEach(counter => {
        const updateCount = () => {
            const target =+ counter.getAttribute('data-target');
            //update count with the full value
            const count =+ counter.getAttribute('count-value');

            const speed = target / 1000; //this will not work accurately if using Math.ceil or floor to round number up
           
            if (count < target) {
                //set the innertext to the rounded up value
                counter.innerText = Math.ceil(count + speed);
                //update the hidden attribute with the full value
                counter.setAttribute('count-value', count + speed);
                setTimeout(updateCount,1);
            } else {
                counter.innerText = target;
            }
        }
        updateCount();
    });

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html , body {
  width: 100%;height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
/* HEADER */

.counter {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}

    <span data-target="20" count-value="0" class="counter">0</span>
    <span data-target="100" count-value="0" class="counter">0</span>
    <span data-target="50" count-value="0" class="counter">0</span>
    <span data-target="250000" count-value="0" class="counter">0</span>

Answer 4

When using the same value for calculation and display, rounding off can result in losing precision. For example, if 1.3 + 3 = 4.3 on the first iteration, then on the next iteration, 4.3 will be rounded up to 5 and the sum would become 5 + 3. This discrepancy can make the speed appear inconsistent.

To address this issue, adding a hidden attribute called count-value to the span allows you to store the full number with all decimals for calculations. You can then display the number without decimals to users without affecting the sum.

const counters = document.querySelectorAll('.counter');

    counters.forEach(counter => {
        const updateCount = () => {
            const target =+ counter.getAttribute('data-target');
            //update count with the full value
            const count =+ counter.getAttribute('count-value');

            const speed = target / 1000; //this will not work accurately if using Math.ceil or floor to round number up
           
            if (count < target) {
                //set the innertext to the rounded up value
                counter.innerText = Math.ceil(count + speed);
                //update the hidden attribute with the full value
                counter.setAttribute('count-value', count + speed);
                setTimeout(updateCount,1);
            } else {
                counter.innerText = target;
            }
        }
        updateCount();
    });

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html , body {
  width: 100%;height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
/* HEADER */

.counter {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}

    <span data-target="20" count-value="0" class="counter">0</span>
    <span data-target="100" count-value="0" class="counter">0</span>
    <span data-target="50" count-value="0" class="counter">0</span>
    <span data-target="250000" count-value="0" class="counter">0</span>

Answer 5

Answer №3

If you need assistance, you can refer to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Here is an example with an additional data-attribute:

const counters = document.querySelectorAll('.counter');

counters.forEach(counter => {
  const updateCount = () => {
    const target = +counter.getAttribute('data-target');
    const count = +counter.getAttribute('data-count');

    const speed = target / 1000; //this approach may not be precise when using Math.ceil or floor to round up numbers

    if (count < target) {
      counter.setAttribute('data-count', count + speed);
      let stripped = (count + speed).toFixed(0);
      counter.innerText = stripped
      setTimeout(updateCount, 1);
    } else {
      counter.innerText = target;
    }
  }
  updateCount();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


/* HEADER */

.counter {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}

<span data-target="20" class="counter">0</span>
<span data-target="100" data-count="0" class="counter">0</span>
<span data-target="50" data-count="0" class="counter">0</span>
<span data-target="250000" data-count="0" class="counter">0</span>

Answer 6

If you need assistance, you can refer to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Here is an example with an additional data-attribute:

const counters = document.querySelectorAll('.counter');

counters.forEach(counter => {
  const updateCount = () => {
    const target = +counter.getAttribute('data-target');
    const count = +counter.getAttribute('data-count');

    const speed = target / 1000; //this approach may not be precise when using Math.ceil or floor to round up numbers

    if (count < target) {
      counter.setAttribute('data-count', count + speed);
      let stripped = (count + speed).toFixed(0);
      counter.innerText = stripped
      setTimeout(updateCount, 1);
    } else {
      counter.innerText = target;
    }
  }
  updateCount();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


/* HEADER */

.counter {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}

<span data-target="20" class="counter">0</span>
<span data-target="100" data-count="0" class="counter">0</span>
<span data-target="50" data-count="0" class="counter">0</span>
<span data-target="250000" data-count="0" class="counter">0</span>

Show a portion of decimal numbers without altering their true numerical values

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Twitter share link for your website with concise blog posts is simple and effective

Rotation snapping feature 'control.setRotationSnap' in TransformControls.js (Three.js) is not functioning properly

Ensure that buttons are cropped when extending beyond the border of another DIV

Implementing Angular Bootstrap UI into an Angular 1.3.0 application

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

What are the steps to incorporating HTML code into JavaScript?

unable to view icons from Summernote inline

Animations within Angular components are being triggered even after the parent component has been removed from

Show an image in JPEG format using JavaScript within an img tag

Range slider position not being updated after user interaction

Attempting to integrate a chatroom name entered by the user using a combination of Ajax and Python

ReactJS did not get the expected function type for the onClick event listener, instead receiving an object type

Angular 6 issue: Bootstrap 4 carousel indicators not responsive to clicks

Guide on creating event hooks within VUE 2.0 component connections

The issue with the placement of the Bootstrap navbar-brand

Seeking guidance for Ajax file uploads

`Connected circles forming a series in d3`

Utilizing an external JavaScript file for developing applications on Facebook

Getting the ID name from a select tag with JavaScript - A quick guide!

HTML modal windows are a great way to show