如何在Apple制作实时广告牌？

Question

Right now, Apple shows "The App Store is about to hit 10 billion downloads".

The index page contains a kind of real-time billboard, displaying a constantly increasing number of downloads.

They're using pure HTML+JS.

What is about real-time updating ? What do you think ?

Answer 1

It appears to fetch this document via AJAX: http://www.apple.com/autopush/us/itunes/includes/countdown.inc?r=0.7329968574922532

Containing:

20-JAN-2011 06:00:00|9944770635|1176919

It would appear this is in the format:

<timestamp>|<total as of timestamp>|<rate as of timestamp>

The javascript then increments the total by multiplying the rate by the difference between now and the timestamp. Then it simply increments it by the rate every certain interval and animates the display.

Answer 2

It is possible that when the page loads they give a count and then they give the JavaScript a rate of increase perhaps base on recent activity. If so then it is not real time updating and is also not entirely accurate if you leave it open. Only when it first loads.

I have not seen the timer. Is there a link to it available?

Answer 3

It fetches the current count via an XHR request like http://www.apple.com/autopush/us/itunes/includes/countdown.inc?r=0.1472943772081361

which contains a response like:

20-JAN-2011 06:00:00|9944770635|1176919 

That has the count (9944770635) as of 06:00 today (I guess that's UTC). Then it uses some math to approximate the number of downloads between then and now.

Answer 4

First, it only gets the current count once via ajax (you can inspect the element and see the xhr request in firebug's HTML and NET panels), and then it animates the 'top' and 'left' position of each time container element.

See screenshot