2017-08-24 118 views
0

我正在使用以下脚本计算计时器。它在几秒钟内计数没有问题,但我无法使其显示分钟。例如1:35(1分35秒) 任何建议,将不胜感激。提前致谢。分钟计时器上不显示分钟

var clicked = false; 
 
var sec = 00; 
 
var min = 00; 
 

 
function startClock() { 
 
    if (clicked === false) { 
 
    clock = setInterval("stopWatch()", 1000); 
 
    clicked = true; 
 
    } else if (clicked === true) {} 
 
} 
 

 
function stopWatch() { 
 
    sec++; 
 
    document.getElementById("timer").innerHTML = sec; 
 
} 
 

 
function stopClock() { 
 
    window.clearInterval(clock); 
 
    sec = 0; 
 
    document.getElementById("timer").innerHTML = 0; 
 
    clicked = false; 
 
} 
 

 
var min = 0; 
 
var second = 00; 
 
var zeroPlaceholder = 0; 
 
var counterId = setInterval(function() { 
 
    countUp(); 
 
}, 1000); 
 

 
function countUp() { 
 
    second++; 
 
    if (second == 59) { 
 
    second = 00; 
 
    min = min + 1; 
 
    } 
 
    if (second == 10) { 
 
    zeroPlaceholder = ''; 
 
    } else 
 
    if (second == 00) { 
 
    zeroPlaceholder = 0; 
 
    } 
 

 
    document.getElementById("count-up").innerText = min + ':' + zeroPlaceholder + second; 
 
}
<div class="timer"> 
 
    <div id="timer">0:00</div> 
 
    
 
    <input type="button" id="btnParentButton" value="start timer" onClick="startClock()"/>

+0

前导零不包含在数字中,你需要字符串来代表最新的数字与前导零。一个流行的技巧,如果需要添加前导零:'var minStr =('0'+ min).substr(-2);'。 – Teemu

+0

为什么你有两个变量'sec'和'second'?你也是var'ing'min'两次。 – AndFisher

回答

0

希望这可以帮助你。

更好的方法是让你分钟,秒为全局变量和简单的功能,每个按钮

编辑

更新使用纯代码JS

var min = 0; 
 
var sec = 0; 
 
var timer = undefined; 
 
var isStarted = false; 
 

 
function startcount(){ 
 
    sec++; 
 
    if(sec==60) 
 
    { 
 
    sec=0; 
 
    min++; 
 
    } 
 
    updateClock(); 
 
} 
 

 
function updateClock(){ 
 
    var displaySec = sec < 10 ? "0" + sec : sec; 
 
    var displayMin = min < 10 ? "0" + min : min; 
 
    document.getElementById("count").innerHTML = displayMin + " : " + displaySec; 
 
} 
 

 
function start(){ 
 
    if(timer == undefined || !isStarted){ 
 
    timer = setInterval(function(){ 
 
    startcount(); 
 
    },1000); 
 
    } 
 
    isStarted = true; 
 
} 
 

 
function stop(){ 
 
    isStarted = false; 
 
    clearInterval(timer); 
 
} 
 

 
function reset(){ 
 
    stop(); 
 
    min=sec=0; 
 
    timer = undefined; 
 
    updateClock(); 
 
} 
 

 

 
updateClock();
<div id="count"></div> 
 
<button class="start" onClick="start()">Start</button> 
 
<button class="stop" onClick="stop()">Stop</button> 
 
<button class="reset" onClick="reset()">Reset</button>

0

看跌向上计数,而不是ID =定时器

var clicked = false; 
 
var sec = 00; 
 
var min = 00; 
 

 
function startClock() { 
 
    if (clicked === false) { 
 
    clock = setInterval("stopWatch()", 1000); 
 
    clicked = true; 
 
    } else if (clicked === true) {} 
 
} 
 

 
function stopWatch() { 
 
    sec++; 
 
    document.getElementById("timer").innerHTML = sec; 
 
} 
 

 
function stopClock() { 
 
    window.clearInterval(clock); 
 
    sec = 0; 
 
    document.getElementById("timer").innerHTML = 0; 
 
    clicked = false; 
 
} 
 

 
var min = 0; 
 
var second = 00; 
 
var zeroPlaceholder = 0; 
 
var counterId = setInterval(function() { 
 
    countUp(); 
 
}, 1000); 
 

 
function countUp() { 
 
    second++; 
 
    if (second == 59) { 
 
    second = 00; 
 
    min = min + 1; 
 
    } 
 
    if (second == 10) { 
 
    zeroPlaceholder = ''; 
 
    } else 
 
    if (second == 00) { 
 
    zeroPlaceholder = 0; 
 
    } 
 

 
    document.getElementById("count-up").innerText = min + ':' + zeroPlaceholder + second; 
 
}
<div class="timer"> 
 
    <div id="count-up">0:00</div> 
 
    
 
    <input type="button" id="btnParentButton" value="start timer" onClick="startClock()"/>