Question

html 倒计时代码问题

我想写一个 倒计时按钮代码，像小米官网那样的，到达时间倒计时后就激活按钮的，格式是X天X小时X分X秒
谢谢了，好的我加分哦~~
就像上面那个图一样，到达时间后就自动激活了

Answer 1

首先我们判断，原帖主质疑小米官网是在用户进入官网购买排队页面的时候就“产生随机数，同时保存进浏览器的Cookies里，这个时候就决定了能不能抢到，第一次没成功，下面再如何点击‘进入活动’都是徒劳的。”的部分，应该是这一段代码：

if( !Base.cookie("xm_uu_bd") ) {
//来标识是否第一次进入摇色子
Base.cookie("xm_uu_bd","true", {
path: '/',
domain: '.xiaomi.com',
expires: 1

这一段代码的含义是：
第一行：判断用户是否是第一次访问小米网。
第二行：注释。
第三行：如果用户是第一次访问小米网，则给他注入一个Cookie，标识用户的状态。
第四行：路径
第五行：Cookie写入的域
第六行：Coookie的时效：1天。

这段代码的含义和功能是这样的：

当一个用户来到这个排队购买的页面的时候，这个本地静态页面先通过Cookie判断这个用户是不是当天第一次访问这里。如果没有相应的Cookie值，就给他赋予一个Cookie 。

为什么要这么做呢？因为小米手机每次的开放购买都有很多用户希望买到，因此每次开放购买的时刻的头一秒会有蜂拥而至的米粉进入小米官网的购买页面来购买小米手机。无论如何，系统是无法让所有人都在逻辑意义上的“同时”去进入抢购手机的。所有人在计算机的逻辑上，间隔的时间再短，也是一个一个进入系统去请求购买的。

为了既不让所有人同时在同一秒向服务器发送请求，搞成DDOS，又保障每一个新进入该页面申请购买的用户能够有尽可能大的和平等的机会，这个Cookie把第一次进入该页面的用户做出了标注。

那么，第一次进入这个页面的用户会有怎样的特别安排呢？

第一次进入的用户在进入排队的时候，不是统一的等待倒计时10秒，而是被随机分配倒计时4～10秒。这样，就可以依靠系统将用户提交请求的时刻分散开来，而不会让用户的请求集中在一秒之内，给服务器带来巨大的压力而崩溃。第一次倒计时后，所有的用户就一视同仁了，如果一次提交购买请求未果，需要排队等待的时间都是10秒。

当倒计时结束后，可以进入活动了，会发生什么呢？到底谁能够购买到这次发售的小米手机呢？

当倒计时结束后，大家就会看到这个按钮从灰色变成了红色，变成了可以点击的状态。当用户点击了这个按钮之后，浏览器才开始第一次将用户购买手机的请求提交给服务器。这个时候，服务器将按照服务器接收到请求的顺序，顺序给予用户进入下一步购买流程的资格，并且，每放入一个求购的用户，服务器上所记录的手机库存数就-1，比如这次开放购买10万台红米手机，第一个用户进入购买后，库存状态就要修改为99999，然后继续放入下一个用户的请求。因为这些都是在服务器端计算实现的，期间的时间间隔非常非常的小，用户肯定是无法用人的感觉来区分这种顺序的，大家感觉的是同时，很快10万台手机被抢光了。

如果，当海量的用户同时提交购买申请的用户很多，某一时刻服务器确实没能处理过来，只接受了某一部分请求的时候，那另一部分申请未能被服务器通过的时候，这部分用户的屏幕上会发生什么？用户会看到他刚刚点击的按钮再次变成灰色，从10开始，倒计时。又或者当服务器上的库存状态终于从10万，一个一个的减少，最终变成了0的时候，会发生什么呢？接下来还有用户点击“进入活动”的按钮，向服务器提交购买的请求，这个时候这个请求就会被拒绝，于是用户就会看到按钮再次变成灰色，开始进入10秒的倒计时。

这时候有用户要问了：“库存都变成0了，你还让我等10秒，这不是坑爹吗？”

真的是坑爹吗？

细心的朋友应该注意到，以上的流程中，用户的身份其实还没有经过任何认证，这个用户有没有预约呢？如果没有预约可是没有资格参与抢购啊。因此，事实是服务器是到了前面的步骤时候，才对那些被放进来的用户开始进行身份验证，有没有预约啦什么的。如果用户没有这个资格呢，用户会看到购买页面提示他没有资格参与这一轮购买。然后过程终止。这个时候刚才在服务器减掉的库存，又要重新加回去。

还有的用户也许只是凑热闹，点击进去看了一样，并没有下单，或者突然电脑死机了，或者网络断网了……等等总而言之各种可能，在这个用户进入到购买流程后，却没有去生成订单就退出了小米网，那么这部分资源，服务器系统会再次加回到库存中，等待那些等了10秒再次点击按钮发送购买请求的用户来拿走它。

另一段被误解的代码所实现的功能。
这段代码如下：

time:function () {
var b = Base.$('reback');
if(count === 0){
b.innerHTML="进入活动";
b.className = "reback_btn_next";
this.start();
return false;
}
count = count - 1;
b.innerHTML="重新进入("+count+")";
},

有人解释这是说只有count的值是0的时候才能进入购买，这倒是没错，但是他说这个count是完全随机出来的，就暴露了这个人的无知了。前面的代码：

randomCount = parseInt(Math.random()*(10-4+1)+4)
count = (Base.cookie("xm_uu_bd")) ? 10 : randomCount,

确实是赋予了这个count一个随机的初始值，这个值正是前面我们提到的在系统判断用户如果是第一次进来的时候，所给予的排队机制需要的4～10秒的随机数。
然后呢？然后可不是判断这个随机数等于几，而是开始倒计时啦。当这个数字倒数到0的时候，按钮就变得可以点击，用户就可以向服务器提交购买的申请了。
关于代码部分的解释先简单的进行到这里，如果各位有兴趣，可以iziji学习一下基础的编程知识，或者请教一下身边真正懂得代码的同学、同事来看看。

我再解释一下为什么小米不可能通过这个页面来作弊。

首先，大家看到的这个页面代码，是浏览器已经下载到本地的本地静态代码，这段代码只是帮助把一部分前期的计算工作放在本地执行，避免频繁和服务器交互，降低效率。前面的解释我想很多朋友也看明白了，本地代码执行的工作其实非常有限：帮你做个标记，给你数倒计时，然后帮你想服务器发送请求。

这段代码甚至没有对用户进行任何身份和资格进行服务器端的校验，怎么可能在这个环节下，不依赖服务器端服务程序的总体控制，在本地页面代码就擅作主张先斩后奏呢？

其次，既然这段代码是在本地的，我想一些网友也应该想到了，对这段代码进行本地修改和欺骗，其实是非常容易的事情。小米怎么会把全公司最重要的手机销售环节不放在服务器进行验证，反而是放在本地来进行呢？

其实我们非常理解大家在抢购不到小米手机后的不理解和愤怒的心情，小米公司也将努力的持续提高产能，尽力保障对大家的供给。

但是，红米手机作为一款刚刚发布的新手机，其产能的提高是需要一个过程的，其每周10万台的产能，在整个业界也已经是一个很了不起的数字了。由于红米手机物美价廉，更多的用户希望购买到这款手机，倒是这款手机严重脱销，供不应求，这真的是一个又烦恼，又骄傲的事情。

事实上，一机难求，不也是证明了你的眼光非常独到吗：这么多网友和你一样，认可了红米手机，希望买到这款性价比超高的红米手机。你的眼光不错哦！

中国有句老话，叫好事多磨。在这里我也想和那些这两次还未能买到红米手机的用户说一声：小米还会继续，持续的坚持提高产能，不间断的进行开放购买。我相信，很快大家就能买到你们心仪的红米手机、小米手机的。

毕竟，我们能够看到，虽然每次开放购买过后，有很多朋友因为未能买到手机而愤怒，但是换个角度看，我们也能看到，这两次开放购买，每次都有切切实实的10万朋友买到了红米手机。

20万人啊，真的也不是一个小数字。我们坚信，这个数字未来会增长的越来越快。

希望大家能够给小米更多的支持，只有米粉们的支持，才是小米不断进步的动力。小米手机才会越来越好，越来越便宜，产能越来越高……

Answer 2

<script>
var TotalMinutes = 5;
var TotalMilliSeconds = 5 * 24 * 60 * 60 * 1000;
function takeCount() {
//计数减一
TotalMilliSeconds -= 1000;
//计算时分秒
var day = Math.floor(TotalMilliSeconds / (1000 * 60 * 60 * 24)) % 5;
var hours = Math.floor(TotalMilliSeconds / (1000 * 60 * 60)) % 24;
var minutes = Math.floor(TotalMilliSeconds / (1000 * 60)) % 60;
var seconds = Math.floor(TotalMilliSeconds / 1000) % 60;
//将时分秒插入到html中
document.getElementById("RemainD").innerHTML = day;
document.getElementById("RemainH").innerHTML = hours;
document.getElementById("RemainM").innerHTML = minutes;
document.getElementById("RemainS").innerHTML = seconds;
}
window.onload = setInterval("takeCount();", 1000);
</script>
</head>
<body>
<div id="CountMsg">

<strong id="RemainD"></strong>天
<strong id="RemainH"></strong>时
<strong id="RemainM"></strong>分
<strong id="RemainS"></strong>秒
</div>

追问

要那种按钮试的，按钮上是倒计时，倒计时要精确到X天X小时X分X秒，就像抢购小米手机的那个按钮一样，时间到了就激活了，嘿嘿，谢谢哈

追答

var TotalMinutes = 5;
var TotalMilliSeconds = parseInt(TotalMinutes) * 24 * 60 * 60 * 1000;
function takeCount() {
//计数减一
TotalMilliSeconds -= 1000;
//计算时分秒
var day = Math.floor(TotalMilliSeconds / (1000 * 60 * 60 * 24)) % parseInt(TotalMinutes);
var hours = Math.floor(TotalMilliSeconds / (1000 * 60 * 60)) % 24;
var minutes = Math.floor(TotalMilliSeconds / (1000 * 60)) % 60;
var seconds = Math.floor(TotalMilliSeconds / 1000) % 60;
//将时分秒插入到html中
document.getElementById("but").value = day + "天" + hours + "时" + minutes + "分" + seconds + "秒";
if (day == 0&&hours==0&&minutes==0&&seconds==0) {
document.getElementById("but").disabled = false;
}
document.getElementById("but").onclick = function () {
alert("可以点击了");
}
}
window.onload = setInterval("takeCount();", 1000);

还有什么要求一块说徂徕。

追问

就像上面那样，到0的时候自动变成“立即抢购”，呵呵。。谢谢了