每次登陆Google邮箱,那个不断增加的邮箱容量确实能给人留下深刻印象。感觉应该是运用AJAX技术,来不断读取服务器端邮箱容量,然后显示在登录界面上。
今天在一论坛突然看到,Gmail容量的那个数字,仅仅使用了JavaScript。数字的变化只是简单的数学运算,根本没有使用AJAX。闲着无聊,看看源码,果真如此,如下所示:
首先是定义三个变量:
var quota; //那个容量数字DOM节点的引用
var PAD = '.000000'; //确保最后数字有6位小数
var CP = [
[ 1199433600000, 6283 ],
[ 1224486000000, 7254 ],
[ 2144908800000, 10996 ],
[ 2147328000000, 43008 ],
[ 46893711600000, Number.MAX_VALUE ]
];
//每行第一个数字其实是通过 new Date().getTime() 这样的方法得到的一个时间,以秒为单位。
//每行第二个数字其实是固定的、对应左面时间点的容量。
//思路就是一个小学生都会的简单运算:
假设当前时间介入 2144908800000 和 2147328000000 之间,那么邮箱容量自然就介于10996和 43008 之间了:
avg =(43008 - 10996)/ (2147328000000 - 2144908800000) // 将增量按秒平分
now = new Date().getTime() //获取当前时间
current = ( now - 2144908800000 ) * avg + 10996 //这就得出了当前容量
然后再将其进行简单的格式化,就是将小数部分格式化为6位。就这么简单!
下面是我整理出的源代码,可以试试,看是否和gmail主页上的数字一样。
源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Gmail </TITLE>
<script type="text/javascript">
var quota;
var PAD = '.000000';
var CP = [
[ 1199433600000, 6283 ],
[ 1224486000000, 7254 ],
[ 2144908800000, 10996 ],
[ 2147328000000, 43008 ],
[ 46893711600000, Number.MAX_VALUE ]
];
function OnLoad() {
if (!quota) {
quota = el("quota");
updateQuota();
}
}
function el(id) {
if (document.getElementById) {
return document.getElementById(id);
} else if (window[id]) {
return window[id];
}
return null;
}
function updateQuota() {
if (!quota) {
return;
}
var now = (new Date()).getTime();
var i;
for (i = 0; i < CP.length; i++) {
if (now < CP[i][0]) {
break;
}
}
if (i == 0) {
setTimeout(updateQuota, 1000);
} else if (i == CP.length) {
quota.innerHTML = CP[i - 1][1];
} else {
var ts = CP[i - 1][0];
var bs = CP[i - 1][1];
quota.innerHTML = format(((now-ts) / (CP[i][0]-ts) * (CP[i][1]-bs)) + bs);
setTimeout(updateQuota, 1000);
}
}
function format(num) {
var str = String(num);
var dot = str.indexOf('.');
if (dot < 0) {
return str + PAD;
} if (PAD.length > (str.length - dot)) {
return str + PAD.substring(str.length - dot);
} else {
return str.substring(0, dot + PAD.length);
}
}
</script>
</HEAD>
<BODY οnlοad="OnLoad()">
<span id=quota>2757.272164</span> MB(还在增加中)的免费存储空间供您随意使用,您再也不必删除任何邮件。
</BODY>
</HTML>
javaScrip还真好玩。google 能够将这么简单的技术,运用的这么出色,这点,是一般公司不能比拟的。
支持谷歌!