我一直试图弄清楚几个小时而且我没有成功，这是来自Apple 10亿下载奖的Counter。根本不使用flash，只有javascript和0-9图像，这真的很酷。现在，在stackoverflow成功提取google的pacman之后，我们能做到吗？
P.S我甚至不知道这是使用原型还是脚本，因为它们都包括在内。
答案 0 :(得分：3)
这是：http://images.apple.com/global/scripts/downloadcounter.js
StepTimingFunction = {
timingFunctionForStepCount: function (a) {
return function (b) {
return ((b * (a - 1)) >> 0) / ((a - 1))
}
}
};
DownloadCounter = Class.create();
Object.extend(DownloadCounter.prototype, {
initialize: function (a) {
this._url = a;
this.loadData();
this._isCounting = true
},
setIsCounting: function (a) {
this._isCounting = a
},
stop: function () {
if (this._isCounting) {
if (this._drawTimeout) {
window.clearTimeout(this._drawTimeout)
}
this.setIsCounting(false);
if (this._delegate && typeof this._delegate.counterDidStop === "function") {
this._delegate.counterDidStop(this)
}
}
},
start: function () {
if (!this._isCounting) {
this.loadData();
this.setIsCounting(true);
if (this._delegate && typeof this._delegate.counterDidStart === "function") {
this._delegate.counterDidStart(this)
}
}
},
isCounting: function () {
return this._isCounting
},
_delegate: null,
setDelegate: function (a) {
this._delegate = a
},
delegate: function () {
return this._delegate
},
loadData: function () {
if (this._nextUpdateTimeout) {
window.clearTimeout(this._nextUpdateTimeout);
this._nextUpdateTimeout = null
}
var a = document.location.href.toString();
a = a.replace(/.apple.com\/.*$/, ".apple.com");
new Ajax.Request((a + this._url + "?r=" + Math.random()), {
method: "get",
onSuccess: this.dataRequestDidFinishLoading.bind(this)
})
},
dataRequestDidFinishLoading: function (o) {
var k = o.responseText.split("|"),
n, d, j, g, l, h, b, f, e, m, a, i, c;
localServerBasedReferenceTime = Date.parse(o.getResponseHeader("Date"));
if (k.length === 3) {
n = k[0].split(" ");
d = n[1];
date = n[0].split("-");
this.setRate(parseInt(k[2]) / 3600000);
l = date[0];
g = date[1];
j = date[2];
a = Date.parse(g + " " + l + ", " + j + " " + d + " GMT-0700");
e = new Date(a + 3600000);
m = e.getTime() - a + 1000;
this._nextUpdateTimeout = setTimeout(this.loadData.bind(this), m);
if (typeof localServerBasedReferenceTime === "number") {
this._lastReferenceTime = localServerBasedReferenceTime
} else {
b = new Date();
this._lastReferenceTime = b.getTime()
}
f = this._lastReferenceTime - a;
i = Math.floor(parseInt(k[1]) + f * (this._rate));
this.setCurrentCount(i);
this.setNeedsDisplayIfNeeded()
}
},
setNeedsDisplayIfNeeded: function () {
if (!this._drawTimeout) {
this._drawTimeout = setTimeout(this.draw.bind(this), this._drawRefreshRate)
}
},
setElement: function (c) {
this._element = c;
var b = this._element.getElementsByClassName("digitGroupSeparator");
if (b.length > 0) {
var a = b[0];
this._element.removeChild(a);
this.setDigitGroupSeparatorTemplateElement(a)
}
this._element.empty();
this.createDigitElementsIfNeeded();
this.setNeedsDisplayIfNeeded()
},
setDigitGroupSeparatorTemplateElement: function (a) {
this._digitGroupSeparatorTemplateElement = a
},
_currentCount: 0,
setCurrentCount: function (a) {
if (a !== this._currentCount) {
this._currentCount = a;
this.createDigitElementsIfNeeded()
}
},
digitTemplateElement: function () {
if (!this._digitTemplateElement) {
this._digitTemplateElement = document.createElement("span");
$(this._digitTemplateElement).addClassName("digit");
var a = document.createElement("div"),
b = document.createElement("div"),
c = document.createElement("div");
$(a).addClassName("digitText");
$(b).addClassName("digitImage");
this._digitTemplateElement.appendChild(a);
this._digitTemplateElement.appendChild(b);
$(c).addClassName("digitImageElement");
b.appendChild(c.cloneNode(true));
b.appendChild(c)
}
return this._digitTemplateElement
},
createDigitElementsIfNeeded: function () {
if (this._element && (!this._digitElements || this._digitElements.length !== this._currentCount.toString().length)) {
this._element.empty();
this._createDigitElements()
}
},
_createDigitElements: function () {
if (!this._digitElements) {
this._digitElements = []
}
var e = 0,
b = (this._maxCount && this._currentCount >= this._maxCount) ? this._maxCount.toString().length : this._currentCount.toString().length,
c = document.createDocumentFragment(),
a, h = this.digitTemplateElement(),
g = this._digitGroupSeparatorTemplateElement,
d = (this._maxCount && this._currentCount >= this._maxCount) ? String(this._maxCount) : String(this._currentCount),
f;
if (!g) {
g = document.createElement("span");
$(g).addClassName("digitGroupSeparator")
}
for (e = 0 + this._digitElements.length; e < b; e++) {
a = h.cloneNode(true);
f = parseInt(d.charAt(b - (e + 1)));
a.lastChild.style.top = "-" + (f * (this._digitImageAnimationCount * this._digitImageHeight)) + "px";
this._digitElements[e] = a;
if (e > 0 && ((e) % 3 == 0)) {
c.insertBefore(g.cloneNode(true), c.firstChild)
}
c.insertBefore(a, c.firstChild)
}
this._element.insertBefore(c, this._element.firstChild)
},
currentCount: function () {
return this._currentCount
},
setRate: function (a) {
this._rate = a
},
rate: function () {
return this._rate
},
_drawRefreshRate: 50,
_digitImageHeight: 38,
setDigitImageHeight: function (a) {
this._digitImageHeight = a
},
_digitImageAnimationCount: 6,
setDigitImageAnimationCount: function (a) {
this._digitImageAnimationCount = a
},
_maxCount: false,
setMaxCount: function (a) {
this._maxCount = a
},
draw: function () {
window.clearTimeout(this._drawTimeout);
this._drawTimeout = null;
var h = this._drawRefreshRate,
e, j, k, c, a, l, o, b, n, d, m, p = this._digitImageHeight * this._digitImageAnimationCount,
g, f = this._digitElements,
q;
if (this._element) {
m = String(this._currentCount);
this._currentCount = this._currentCount + Math.floor(this._rate * h);
if (this._delegate && typeof this._delegate.counterDidReachValue === "function") {
this._delegate.counterDidReachValue(this, this._currentCount)
}
if (this._maxCount && this._currentCount >= this._maxCount) {
this._isCounting = false
}
if (!this._isCounting) {
return
}
e = (this._maxCount && this._currentCount >= this._maxCount) ? String(this._maxCount) : String(this._currentCount);
j = e.length;
k = j - 1;
for (c = k; c >= 0; c--) {
l = parseInt(e.charAt(c));
o = parseInt(m.charAt(c));
if (l !== o) {
if (!((k - c) < f.length)) {
this._createDigitElements()
}
a = f[k - c].lastChild;
if (a.___animating !== true) {
n = o * p;
if (l > o) {
b = l * p
} else {
b = (o + (10 - o) + l) * p
}
if (a.style.top !== (d = "-" + n + "px")) {
a.style.top = d
}
g = 1 + ((b - n) / this._digitImageHeight);
a.___animating = true;
q = new Effect.Move(a, {
x: 0,
y: (-1 * b),
duration: 0.4,
mode: "absolute",
transition: StepTimingFunction.timingFunctionForStepCount(g)
});
q.__element = a;
q.finish = function (i) {
if (window.removeEventListener) {
window.removeEventListener("unload", arguments.callee, false)
}
if (this.__element !== undefined) {
this.__element.___animating = false
}
};
if (window.addEventListener) {
window.addEventListener("unload", q.finish, false)
}
}
}
}
}
this._lastReferenceTime = (this._lastReferenceTime + h);
this.setNeedsDisplayIfNeeded()
}
});
答案 1 :(得分：1)
看起来是JS counter加上CSS。
答案 2 :(得分：1)
整个剧本的中心是这张单张图片：http://images.apple.com/itunes/10-billion-app-countdown/images/filmstrip.png
现在一切都应该是显而易见的。
单个数字的HTML占位符：
<div class="digit-placeholder"></div>
用于设置占位符样式的CSS：
.digit-placeholder {
/* Dimensions of a single "frame" */
width: 50px;
height: 75px;
background-image: url(...);
background-position: 0 0;
}
要显示数字7，您只需将背景（background-positon属性）移动到以下坐标：0 -2800px（这只是一个示例）。要显示8，请将其移至0 -3400px。
您所要做的就是多次克隆（10次10亿次）并计算每个数字的那段时间。
答案 3 :(得分：0)
苹果服务器上存储了一个包含计数和时间戳的文件：
http://www.apple.com/autopush/us/itunes/includes/countdown.inc
这应该给你一个粗略的计数。
答案 4 :(得分：0)
在我睡觉之前：
var number = '';
$('.digitImage').each(function(i) {
number += Math.abs($(this).position().top) / 618;
});
console.log(+number);
现在需要多长时间？ 3分钟试图弄清楚如何在chrome中安装一个bookmarklet来注入jQuery ...再花5分钟让它工作。