<div id="myDiv"></div>
<script>
myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0];
setInterval(function(){myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0];
},500);
</script>

<div id="myDiv"><label for="set"><input type="number" id="set" step="1" value="0">秒</label><button id="btn">确定</button><button id="reset">重置</button>
</div>
<script>
var timer;
reset.onclick = function(){history.go();
}
btn.onclick = function(){if(timer) return;set.setAttribute('disabled','disabled');timer = setInterval(function(){if(Number(set.value) === 0){clearInterval(timer);timer = 0;set.removeAttribute('disabled');return;}set.value = Number(set.value) - 1;},1000);
}
</script>

<div id="myDiv"><label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />时</label><label for="minute"><input type="number" id="minute" min="0" max="59" step="1" value="0" />分</label><label for="second"><input type="number" id="second" min="0" max="23" step="1" value="0" />秒</label><button id="btn">确定</button><button id="reset">重置</button>
</div>
<script>
var timer;
//输入限制
hour.onchange = function(){if(Number(this.value) !== Number(this.value)) this.value = 0;if(this.value > 23) this.value = 23;if(this.value < 0) this.value = 0;
}
second.onchange = minute.onchange = function(){if(Number(this.value) !== Number(this.value)) this.value = 0;if(this.value > 59) this.value = 59;if(this.value < 0) this.value = 0;
}
reset.onclick = function(){history.go();
}
btn.onclick = function(){if(timer) return;for(var i = 0; i < 3; i++){myDiv.getElementsByTagName('input')[i].setAttribute('disabled','disabled');}//原始储存值var setOri = hour.value*3600 + minute.value*60 + second.value*1;//原始系统时间值var timeOri = (new Date()).getTime();//现在所剩时间值var setNow;cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){//当前系统时间值var timeNow = (new Date()).getTime();//使系统时间的差值与设置时间的差值相等，来获得正常的时间变化setNow = setOri - Math.floor((timeNow - timeOri)/1000);hour.value = Math.floor((setNow%86400)/3600);minute.value = Math.floor((setNow%3600)/60);second.value = Math.floor(setNow%60);timer = requestAnimationFrame(fn);if(setNow==0){cancelAnimationFrame(timer);timer = 0;btn.innerHTML = '计时结束';for(var i = 0; i < 3; i++){myDiv.getElementsByTagName('input')[i].removeAttribute('disabled');}setTimeout(function(){btn.innerHTML = '确定';},1000)            }})
}
</script>

<div id="myDiv"><label for="set"><input id="set" value="0"></label><button id="btn">开始</button><button id="reset">重置</button>
</div>
<script>
var timer;
var con = 'off';
var num = 0;
reset.onclick = function(){history.go();
}
btn.onclick = function(){if(con === 'off'){set.setAttribute('disabled','disabled');con = 'on';btn.innerHTML = '暂停';timer = setInterval(function(){num+= 100;var minute = Math.floor(num/1000/60);var second = Math.floor(num/1000);var ms = Math.floor(num%1000)/100;set.value = minute + ' : ' + second + ' . ' + ms; },100);}else{clearInterval(timer);con = 'off';btn.innerHTML = '开始';    }
}
</script>

<div id="myDiv"><label for="set"><input id="set" value="0"></label><button id="btn">开始</button><button id="reset">重置</button>
</div>
<script>
var timer;
var con = 'off';
//ori表示初始的系统时间
var ori;
//dis表示当前运行时的秒数(动态)
var dis = 0;
//last储存暂停时的秒数(静态)
var last = 0;
reset.onclick = function(){history.go();
}
btn.onclick = function(){if(con === 'off'){set.setAttribute('disabled','disabled');con = 'on';btn.innerHTML = '暂停';//保留已经走过的秒数的系统时间ori = (new Date()).getTime() - last; timer = requestAnimationFrame(function fn(){dis = (new Date()).getTime() - ori;cancelAnimationFrame(timer);timer = requestAnimationFrame(fn);var minute = Math.floor(dis/1000/60);var second = Math.floor(dis/1000);var ms = Math.floor(dis%1000);set.value = minute + ' : ' + second + ' . ' + ms; });}else{cancelAnimationFrame(timer);btn.innerHTML = '开始';    con = 'off';last = dis;}
}
</script>

<div id="myDiv"></div>
<div id="con"><label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />时</label><label for="minute"><input type="number" id="minute" min="0" max="59" step="1" value="0" />分</label><label for="second"><input type="number" id="second" min="0" max="23" step="1" value="0" />秒</label><button id="btn">确定</button><button id="reset">重置</button>
</div>
<div id="show"></div>
<script>
var timer;
//所剩时间
var dis;
myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0];
setInterval(function(){myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0];
},100);
reset.onclick = function(){history.go();
}
btn.onclick = function(){//原始储存值var setOri = hour.value*3600 + minute.value*60 + second.value*1;//原始值转换为1970年的毫秒数var setMs = +new Date(new Date().toDateString()) + setOri*1000;//如果设置的时间早于当前时间，则设置无效if(setMs < +new Date()){return;}for(var i = 0; i < 3; i++){con.getElementsByTagName('input')[i].setAttribute('disabled','disabled');}cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){//算出设置时间与当前时间的差值dis = Math.ceil((setMs - (new Date()).getTime())/1000);var showHour = Math.floor((dis%86400)/3600);var showMinute = Math.floor((dis%3600)/60);var showSecond = Math.floor(dis%60);timer = requestAnimationFrame(fn);show.innerHTML = '距离预定时间还有 ' + showHour + '小时 ' + showMinute + '分 ' + showSecond + '秒';//当差值为0时，时间到if(dis==0){cancelAnimationFrame(timer);btn.innerHTML = '时间到了';for(var i = 0; i < 3; i++){con.getElementsByTagName('input')[i].removeAttribute('disabled');}timer = setTimeout(function(){btn.innerHTML = '确定';},1000)            }});
}
</script>