分钟计时器上没有显示分钟数

时间:2017-08-24 11:26:29

标签: javascript html timer

我正在使用以下脚本来计算计时器。它可以在几秒钟内完成计数,但是我无法显示分钟数。例如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()"/>

2 个答案:

答案 0 :(得分: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()"/>

答案 1 :(得分:0)

希望这可以帮到你。

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

修改

使用纯JS更新代码

&#13;
&#13;
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();
&#13;
<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>
&#13;
&#13;
&#13;