简单的倒计时

倒计时就是首先我们先添加一个需要计算的时间，然后按照每秒总时间减去一秒，然后将最终的时间按照小时，分，秒显示出来。

<div class="timeout">
	<h2>倒计时</h2>
	<label for="hours">时：</label><select id="hours" name="xl"></select><label name="outTime" class ="ot"></label>
	<label for="minutes">分：</label><select id="minutes" name="xl"></select><label name="outTime" class ="ot"></label>
	<label for="seconds">秒：</label><select id="seconds" name="xl"></select><label name="outTime" class ="ot"></label>
	<h2><input type="button" id="start" value="Start"/><input type="button" id="reset" value="Reset" /></h2>
</div>

　　使用下拉选择时间，当然也可以更改为输入框，JS对输入数字的验证。

JS代码，单击开始，使用setInterval每隔一秒执行一次函数，让总的时间（换算成秒）减去1秒，然后再将计算后的时间换算成时，分，秒显示在页面。

window.onload=function (){
    var xl=document.getElementsByName('xl');
    for(var n=0;n<xl.length;n++){
        if(n==0){
            for(var i=0;i<24;i++){
                var elems=document.createElement('option');
                var txt=document.createTextNode(i);
                elems.appendChild(txt);
                xl[n].appendChild(elems);
            }
        }
        else{
            for(var j=0;j<60;j++){
                var elems=document.createElement('option');
                var txt=document.createTextNode(j);
                elems.appendChild(txt);
                xl[n].appendChild(elems);
            }
        }
    }
    document.getElementById('start').onclick=function()
    {
        var hours=parseInt(xl[0].value);
        var minutes=parseInt(xl[1].value);
        var seconds=parseInt(xl[2].value);
        var timeall=hours*60*60+minutes*60+seconds;
        if(timeall>0){
        var clearId=setInterval(function (){
        if(timeall>0){
        timeall--;
        var ou=[];
        ou.push(Math.floor((timeall/60)/60));
        ou.push(Math.floor((timeall/60)%60));
        ou.push((timeall%60)%60);
        var outTime=document.getElementsByName('outTime');
        for(var i=0; i<outTime.length;i++){
            xl[i].style.display='none';
            outTime[i].style.display='inline-block';
            outTime[i].innerHTML=ou[i];
        }
    }else{clearInterval(clearId);}},1000);
    }
    else
    alert('Plase select your time!')
    }
}