js实现倒计时效果

本文提供两种方法实现倒计时的效果

1. 获取到需要倒计时的时间毫秒数，用定时器让这个数字每一秒减1，将毫秒数显示在页面中。
2. 通过需要倒计时的时间毫秒数，计算出当前时间加上倒计时时间的未来时间，通过定时器计算这两个的时间差，显示在页面中。
   先来看最终的效果：
   
   页面布局代码：

<input type="text"> 时
<input type="text"> 分
<input type="text"> 秒
<button id="btn">开始</button>
<div id="div0"></div>

第一种方法：

var inputs,timer,inter;
init();
function init(){
    //获取页面中的input
    inputs=document.getElementsByTagName("input");
    //获取按钮
    var btn=document.getElementById("btn");
    //给input添加正则判断，只能输入数字
    for(var i=0;i<inputs.length;i++){
        inputs[i].oninput=inputHandler;
    }
    //给按钮添加点击事件
    btn.onclick=clickHandler;
}
//input内容判断，只能输入数字
function inputHandler(){
    this.value=this.value.replace(/\D/g,"");
}
function clickHandler(){
    var div0=document.getElementById("div0");
    //timer为输入时间的总秒数
    timer=inputs[0].value*3600+inputs[1].value*60+inputs[2].value;
    //设置定时器
    inter = setInterval(animation,1000,div0);
    //将input设置为不可输入
    setDisabled(true);
}
function animation(elem){
    //让毫秒差每一秒减1
    timer--;
    //计算要显示的时间
    var h=timer>=3600? parseInt(timer/3600) : 0;
    var m=timer-h*3600>=60? parseInt(timer/60) : 0;
    var s=parseInt(timer-h*3600-m*60);
    //如果倒计时结束，将input设置为可输入，清除定时器
    if(timer<=0){
        setDisabled(false);
        clearInterval(inter);
    }
    //将内容显示
    elem.innerHTML="倒计时："+h+"小时"+m+"分"+s+"秒";
}
//控制input是否可输入
function setDisabled(bool){
    for(var i=0;i<inputs.length;i++){
        inputs[i].disabled=bool;
    }
}

这种方法比较好理解，缺点是使用定时器来计算时间，会有比较大的误差，下面来看第二种方法：

var inputs,fDate;
init();
function init(){
    //获取页面中的所有input
    inputs=document.getElementsByTagName("input");
    //获取按钮
    var btn=document.getElementById("btn");
    //获取显示的内容div
    var div0=document.getElementById("div0");
    //给input添加oninput事件，让它只输入数字
    for(var i=0;i<inputs.length;i++){
        inputs[i].oninput=inputHandler;
    }
    //设置定时器
    setInterval(animation,500,div0);
    //按钮添加点击事件
    btn.onclick=btnHandler;
}
//正则控制input的输入内容
function inputHandler(){
    this.value=this.value.replace(/\D/g,"");
}
function btnHandler(){
    //获取到输入时间段对应的未来时间
    fDate=new Date();
    fDate.setHours(fDate.getHours()+Number(inputs[0].value));
    fDate.setMinutes(fDate.getMinutes()+Number(inputs[1].value));
    fDate.setSeconds(fDate.getSeconds()+Number(inputs[2].value));
    //让input设置为不可输入
    setDisabled(true);
}
function animation(elem){
    //如果没有设置时间，则直接返回
    if(!fDate) return;
    //获取到当前时间距离未来的时间差
    var nDate=new Date();
    var secondDiff=(fDate-nDate)/1000;
    //如果时间差小于0，设置input为可输入
    if(secondDiff<=0){
        fDate=null;
        setDisabled(false);
        return;
    }
    //计算要显示的时、分秒
    var h=secondDiff>=3600? parseInt(secondDiff/3600) : 0;
    var m=secondDiff>=60? parseInt((secondDiff-h*3600)/60) : 0;
    var s=parseInt(secondDiff-h*3600-m*60);
    elem.innerHTML="倒计时："+h+"小时"+m+"分"+s+"秒";
}
//设置input是否可输入
function setDisabled(bool){
    for(var i=0;i<inputs.length;i++){
        inputs[i].disabled=bool;
    }
} 

这种方法相比第一种方法，误差更小。