Javascript Counter Like Google's Space counter or Walmarts Savings counter

Posted on 2008-10-06
Last Modified: 2012-05-05
Hello Experts, I'm looking for a code snippet of a Javascript counter similar to Google's "Lots of Space" counter found on their mail home page or similar to Walmart's American Savings counter found on their homepage. Both are rolling counters. In the Walmart example it shows how many dollars they've saved american families. (See attached image of Walmart example).

I need a counter that will count how much my company donated to charity. So similar to the attached jpg file, it would display the rolling dollar amount donated.

Can you please provide me with the code that would adequately solve this problem?

I'm currently employing php and mysql. Its safe to assume the sum total contributed will come from a mysql table and the browser will reflect an incrementing counter.
Question by:aristanoble
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2

Expert Comment

ID: 22648509
You would need to use a timer and the XmlHttpRequest to query a php page which would contact your mysql database to retrieve a total and then let the javascript update your content accordingly.

More information about the XmlHttpRequest can be found here:

If you need more help, just post a reply and I'll provide some sample code.

Kind regards,

Matthias Vance
LVL 27

Expert Comment

ID: 22648767
It appears that Google's counter is just a JS estimation of the storage over time based on the current date/time, view their page source for the code used.
LVL 27

Expert Comment

ID: 22648806
Walmart's site has a careful disclaimer with their savings counter, I would suspect it is also just an estimation based on current date/time.
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now


Author Comment

ID: 22655036
Yes Matthais I would need a bit more help. Viewing the Google source code only reminded my how I never understood Japanese (it was all foreign to me). I'm totally a beginner in javascript, even more so with Ajax, but it's important that I utilize this display method, albeit estimation values. I would greatly appreciate the code please.

Accepted Solution

MatthiasVance earned 375 total points
ID: 22657327
At the moment I don't have many time explaining the code, I'll be back in my office in 2 days.
I hope this assists you in the meantime.

Note: The code is kind of IE7-specific and doesn't contain any error checking.

Kind regards,

Matthias Vance
// counter.php
<div id="counter">0</div>
<script language="JavaScript">
	// Load data for the first time
	function refreshCounter() {
		var req = new XMLHttpRequest();
		req.onreadystatechange=function() {
			if(req.readyState == 4 && req.status == 200) {
				var elem = document.getElementById('counter');
				elem.innerHTML = req.responseText;
		// Set timer again
// counter_get.php
	$connection = mysql_connect("<host>", "<user>", "<pass>");
	$result = mysql_query("SELECT SUM(amount) FROM march;", $connection);
	$value = mysql_result($result, 0);
	echo $value;

Open in new window


Author Comment

ID: 22680840
Now is it IE-7 specific due to the use of 'XMLHttpRequest'; I've been reading that different browsers require different request methods, the solutions for that look simple enough to implement. I'll get working on that and post my results.

Featured Post

Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Introduction This article is intended for those who are new to PHP error handling (  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question