javascript /jquery秒表计时器代码
javascript 秒表计时器
实例代码1：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript 计时器</title>
</head>
<body>
<input type="text" value="00:00">
<input type="button" value="开始">
<input type="button" value="结束">
<input type="button" value="重置">
<script>
var oTxt=document.getElementsByTagName("input")[0];
var oStart=document.getElementsByTagName("input")[1];
var oStop=document.getElementsByTagName("input")[2];
var oReset=document.getElementsByTagName("input")[3];
var n= 0, timer=null;
//开始计时
oStart.onclick= function () {
clearInterval(timer);
timer=setInterval(function () {
n++;
var m=parseInt(n/60);
var s=parseInt(n%60);
oTxt.value=toDub(m)+":"+toDub(s);
},1000/60);
};
//暂停并且清空计时器
oStop.onclick= function () {
clearInterval(timer);
}
//重置
oReset.onclick= function () {
oTxt.value="00:00";
n=0;
}
//补零
function toDub(n){
return n<10?"0"+n:""+n;
}
</script>
</body>
</html>
计时器设置运行间隔那里，一开始设置了100，其实是不对的，因为 1秒=1000毫秒；我们要分成60个数字来显示，所以还是要除以60才对。
实例代码1：
<p><span id="clock">00:01:11:00</span>
<input id="startB" type="button" value=" 开始计时 " onclick="run()">
<input id="endB" type="button" value=" 计时暂停 " onclick="stop()" disabled="">
</p>
<p>
<input id="diff" type="text">
<input id="next" type="text">
</p>
<script type="text/javascript">
var normalelapse = 100;
var nextelapse = normalelapse;
var counter;
var startTime;
var start = clock.innerText;
var finish = "00:00:00:00";
var timer = null;
// 开始运行
function run() {
startB.disabled = true;
endB.disabled = false;
counter = 0;
// 初始化开始时间
startTime = new Date().valueOf();
// nextelapse是定时时间, 初始时为100毫秒
// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行
timer = window.setInterval("onTimer()", nextelapse);
}
// 停止运行
function stop() {
startB.disabled = false;
endB.disabled = true;
window.clearTimeout(timer);
}
window.onload = function() {
endB.disabled = true;
}
// 倒计时函数
function onTimer()
{
if (start == finish)
{
window.clearInterval(timer);
alert("time is up!");
return;
}
var hms = new String(start).split(":");
var ms = new Number(hms[3]);
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;
if (ms < 0)
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}
if (m < 0)
{
m = 59;
h -= 1;
}
}
var ms = ms < 10 ? ("0" + ms) : ms;
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;
start = sh + ":" + sm + ":" + ss + ":" + ms;
clock.innerText = start;
// 清除上一次的定时器
window.clearInterval(timer);
// 自校验系统时间得到时间差, 由此得到下次所启动的新定时器的时间nextelapse
counter++;
var counterSecs = counter * 100;
var elapseSecs = new Date().valueOf() - startTime;
var diffSecs = counterSecs - elapseSecs;
nextelapse = normalelapse + diffSecs;
diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;
next.value = "nextelapse = " + nextelapse;
if (nextelapse < 0) nextelapse = 0;
// 启动新的定时器
timer = window.setInterval("onTimer()", nextelapse);
}
</script>
效果：
jquery秒表计时器代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{margin:0;padding:0;}
.box{margin:10px auto;width:400px;}
#showtime{margin:20px;margin-bottom: 20px;text-align: center;}
span{font-size: 60px;}
button{width:100px;height:100px;border-radius: 50px;border:0;outline:none ;margin:0 48px;font-size:24px;}
#record{margin-top:20px;}
#record div{width:400px;height:30px;border-bottom:1px dotted #666;}
#record span{font-size:20px;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div class="box">
<div id="showtime">
<span>00</span>
<span>:</span>
<span>00</span>
<span>:</span>
<span>00</span>
</div>
<div class="bnt">
<button>记次</button>
<button>启动</button>
</div>
<!--记录显示的次数-->
<div id="record">
<!--/*<div>
<span class="left">第一次记录:</span>
<span class="right">00:00:00</span>
</div>*/-->
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//添加事件
$(function(){
var min=0;
var sec=0;
var ms=0;
var timer=null;
var count=0;
//点击第一个按钮
$('.bnt button:eq(0)').click(function(){
if($(this).html()=='记次'){
if(!timer){
alert("没有开启定时器!");
return;
}
count++;
var right1="<span class='right'>"+$('#showtime').text()+"</span>";
var insertStr = "<div><span class='left'>记次"+count+"</span>" +right1+"</div>";
$("#record").prepend($(insertStr));
}else{
min=0;
sec=0;
ms=0;
count=0;
$('#showtime span:eq(0)').html('00');
$('#showtime span:eq(2)').html('00');
$('#showtime span:eq(4)').html('00');
$('#record').html('');
}
});
//点击第二个按钮
$('.bnt button:eq(1)').click(function(){
if($(this).html()=='启动'){
$(this).html('停止');
$('.bnt button:eq(0)').html('记次');
clearInterval(timer);
timer=setInterval(show,10)
}else{
$(this).html('启动');
$('.bnt button:eq(0)').html('复位');
clearInterval(timer);
}
});
//生成时间
function show(){
ms++;
if(sec==60){
min++;sec=0;
}
if(ms==100){
sec++;ms=0;
}
var msStr=ms;
if(ms<10){
msStr="0"+ms;
}
var secStr=sec;
if(sec<10){
secStr="0"+sec;
}
var minStr=min;
if(min<10){
minStr="0"+min;
}
$('#showtime span:eq(0)').html(minStr);
$('#showtime span:eq(2)').html(secStr);
$('#showtime span:eq(4)').html(msStr);
}
})
</script>
</body>
</html>
效果：
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
