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="結(jié)束">
<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>
計時器設(shè)置運行間隔那里，一開始設(shè)置了100，其實是不對的，因為 1秒=1000毫秒；我們要分成60個數(shù)字來顯示，所以還是要除以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函數(shù): 時間逝去nextelapse(毫秒)后, onTimer才開始執(zhí)行
timer = window.setInterval("onTimer()", nextelapse);
}
// 停止運行
function stop() {
startB.disabled = false;
endB.disabled = true;
window.clearTimeout(timer);
}
window.onload = function() {
endB.disabled = true;
}
// 倒計時函數(shù)
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);
// 自校驗系統(tǒng)時間得到時間差, 由此得到下次所啟動的新定時器的時間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>
<!--記錄顯示的次數(shù)-->
<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('復(fù)位');
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>
效果：
如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答?。?點擊進(jìn)入論壇
