-1

I'd like to integrate a counter on a webpage. The counter should count money (so it should count up :) ), which has been raised, based on an estimate which has been raised in the past over a certain time... It does not need to reflect the truly correct amount. It should rather give the feeling, that money is raised and how fast. :)

Also, the counter should not be reset or start over when revisiting the website...

Unfortunately I'm not really a developer and have no idea how to do something like this. :( I found some counters online but none was doing it the way I imagined it.

However, I found a good example of what I was thinking of - on the landing page of www.dailymile.com there's a mile counter on the top left. I was thinking of something like this.

Can someone help me, pls? Thank you!

Wolfgang Bremer
  • 7
  • 1
  • 3

1 Answers1

3

If you want the counter to increase gradually between sessions, and avoid using some kind of server side state, maybe you can base the counter value on a function of time?

<div>
$<span class="moneyCounter"></span> raised so far.
</div>
<script type="text/javascript">

var setCounter = function(){
  var counterValue = 
    (new Date().getTime() - new Date('01/01/2011').getTime())/(1000*60*6);
  $('.moneyCounter').text(counterValue);
}

setInterval(setCounter,10000);
setCounter();

</script>

This will raise the value with 1 every ten seconds. You might want to use a more exciting function, and maybe even a random update interval for the interval.

Jørgen
  • 8,820
  • 9
  • 47
  • 67
  • +1 Good point about "exciting" function! It always looks better if the ammount of money looks like it is increasing with every donations (jumping by small steps), not in the linear manner (with constant rate per second). – Tadeck Dec 07 '11 at 08:10
  • @jorgen: I want this to start at 24,000,000 (24 million). How I can do that? ALso how i can add commas to it looks good? Also how I can use mow man incrementing numbers shows at the end? thanks a lot – Rene Zammit Oct 28 '13 at 22:57
  • To start at 24 million, just add 24 million + counterValue. Formatting numbers: http://stackoverflow.com/questions/1068284/format-numbers-in-javascript . Showing the increased value, you'd need to split counter value in two components: existing value and increment. – Jørgen Oct 29 '13 at 06:24