OhhMuaOhhMua
  • Home
  • Hosting
    • Best Web Hosting
    • Free Web Hosting
    • VPS Hosting
  • WordPress
    • Solutions & Troubleshooting
    • Installation & Setup
    • Themes & Plugins
    • Security
  • Computer Tips
    • Gaming Errors & Solutions
    • PC Troubleshooting
    • Computer Hardware
  • Coupons & Deals
  • Contact Us
  • veo3 prompt generator
Reading: Create a Simple Incrementing Number Effect with HTML and JavaScript
Share
Notification Show More
Font ResizerAa
OhhMuaOhhMua
Font ResizerAa
  • Computer Tips
  • Hosting
  • WordPress
Search
  • Home
  • WordPress
    • Installation & Setup
    • Security
    • Solutions & Troubleshooting
    • Themes & Plugins
    • Troubleshooting
  • Hosting
    • Free Web Hosting
    • VPS Hosting
    • Best Web Hosting
  • Computer Tips
    • PC Troubleshooting
    • Gaming Errors & Solutions
    • Computer Hardware
  • Coupons & Deals
  • veo3 prompt generator
Have an existing account? Sign In
Follow US
Copyright © 2024 ohhmua. All rights reserved.
OhhMua > Blog > WordPress > Solutions & Troubleshooting > Create a Simple Incrementing Number Effect with HTML and JavaScript
Solutions & Troubleshooting

Create a Simple Incrementing Number Effect with HTML and JavaScript

ohhmua
Last updated: September 17, 2024 4:14 pm
ohhmua
Share
3 Min Read
Create a Simple Incrementing Number Effect with HTML and JavaScript 2
Create a Simple Incrementing Number Effect with HTML and JavaScript 2
SHARE
Contents
Step 1: Create the number with HTMLStep 2: Copy the JavaScript code

Hello everyone, during my web development journey, I often encounter client requests to display data with an increasing number effect, which makes the website more dynamic and engaging. Today, I will share with you a very simple way to create an incrementing number effect using HTML and JavaScript!

Create a Simple Incrementing Number Effect with HTML and JavaScript 2
Create a Simple Incrementing Number Effect with HTML and JavaScript

This tutorial uses the Flatsome theme, so if you are using the Flatsome theme, you can follow it exactly. If you’re using a different theme, you might need to tweak the code or the steps to make it work for your setup.

Step 1: Create the number with HTML

Using the UX Builder in the Flatsome theme, edit the page and insert a custom HTML block by following the instructions as shown in the image below:
Create your desired HTML code, consisting of two separate parts: the running number part and the explanation part, as shown in the image. The running number part will have the class "item-number" and the attribute data-count="desired final number". Just follow this format and change the number as needed! (the part highlighted in green).

Create a Simple Incrementing Number Effect with HTML and JavaScript 3
Create a Simple Incrementing Number Effect with HTML and JavaScript 
<p style="text-align: center;">
  <strong class="item-number" id="number_1" data-count="7">7</strong><br />
  Instructional article from ohhmua.com, thank you for watching
</p>

Step 2: Copy the JavaScript code

Go to the Advanced settings in Flatsome – Global Setting – Footer Script, and copy and paste the following code into that section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><br />
<script>$('.item-number').each(function () {$(this).prop('item-number',0).animate({Counter: $(this).text()}, {duration: 7000,easing: 'swing',step: function (now) {$(this).text(Math.ceil(now));}});
});</script>
Create a Simple Incrementing Number Effect with HTML and JavaScript 1
Create a Simple Incrementing Number Effect with HTML and JavaScript

Please note, if you want the number to run slower, you can adjust the value in the duration:7000 section!

You Might Also Like

SEO in the Age of AI: How to Make Google Understand and Value Your Content

Cannot Fetch Sitemap in Google Search Console

Discovered – Currently Not Indexed in Google Search Console: What It Means & How to Fix It

Why 2 Backlinks per Article Might Be Killing Your SEO

What is Obsidian? Why Developers Love This Note-Taking App

TAGGED:HTML and JavaScript
Share This Article
Facebook Twitter Email Print
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Trending

Title and Meta Description Mismatch on Google
Solutions & Troubleshooting

Title and Meta Description Mismatch on Google[How to fix]

September 25, 2024
what is computer hardware
Computer Hardware

What is Computer Hardware? Everything You Need to Know

August 23, 2020
The detailed guide to installing a second SSD in your computer [Full A Z]
Computer Hardware

The detailed guide to installing a second SSD in your computer [Full A-Z]

August 11, 2020
Internet Connected But Can't Access Some Websites
Computer Tips

Internet Connected But Can’t Access Some Websites: Causes and Fixes

September 25, 2020
Guide to Creating a Beautiful Promotion Notification Box for Your Website
Solutions & Troubleshooting

How to Create a Stunning Notification Box for Your Website

September 20, 2024
WordPress Covers Every Website Type
Solutions & Troubleshooting

Blog, E-Commerce, or Forum? WordPress Covers Every Website Type!

April 29, 2025
Previous Next

You Might Also Like

Optimize WordPress
Solutions & Troubleshooting

Want Faster Load Times? Optimize WordPress This Way

May 16, 2025
My Google Discover traffic skyrocketed after I did these 10 things
Solutions & Troubleshooting

My Google Discover traffic skyrocketed after I did these 10 things

May 14, 2025
How to Add a Read More to Product Descriptions in WooCommerce
Solutions & Troubleshooting

How to Add a “Read More” and “Show Less” Button to Product Descriptions in WooCommerce

May 5, 2025
Optimized Pagination thumbnail
Solutions & Troubleshooting

How I Optimized Pagination and Skyrocketed Traffic

April 28, 2025
Previous Next
newsletter featured

Always Stay Up to Date

Subscribe to our newsletter to get our newest articles instantly!

Follow US on Social Media

Facebook Youtube Steam Twitch Unity

Copyright © 2024 ohhmua. All rights reserved.

OhhMua

Information

  • About
  • Terms & Conditions
  • Privacy Policy
Welcome Back!

Sign in to your account

Lost your password?