Question

我的计时器有些问题。更改定时器持续时间时，我无法使定时器从新持续时间开始。我该如何解决这个问题？请帮忙。这是我的代码：

CSS：

<label class="btn btn-default">
    <span style="white-space: normal">
        <input type="checkbox">
        Connections / Hoses Leaking or Cracked Connections / Hoses Leaking or Cracked
    </span>
</label>

HTML：

div {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid;
    text-align: center;
}

JS：

<div class='session'>2</div>
<div id='increase' onclick='decrease()'>-</div>
<div id='increase' onclick='increase()'>+</div>
<div class='session' id='session' onclick='setInterval(changeSessionDuration,100)'>2</div>

Answer 1

如果我正确理解您的问题，您的计时器不会在您预先添加计时器的正确时间开始吗？

如果那时候，因为这一行：

var session = x[1].innerHTML - 1;

在递增/递减时间之前已设置会话值。

您应该在增量/减量之后或开始运行之前设置会话值，如：

<div class='session' id='session' onclick='setSession(); setInterval(changeSessionDuration,100);'>2</div>

和JS将是：

var x = document.getElementsByClassName('session');
var seconds = 60;

function increase() {
    for (var i = 0; i < x.length; i++) {
        x[i].innerHTML++;
    }
}

function decrease() {
    for (var i = 0; i < x.length; i++) {
        if (x[i].innerHTML > 0) {
            x[i].innerHTML--;
        }
    }
}

var session;
function setSession(){
    session = x[1].innerHTML - 1;
}

function changeSessionDuration() {
    if (seconds > 0) {
        seconds--;
        if (seconds == 0 && session > 0) {
            session--;
            seconds = 60;
        }
    }
    x[1].innerHTML = session + ':' + seconds;
}

我的示例代码很脏，你应该适应你的风格。

Answer 2

这是因为您没有清除先前设置的间隔。您需要在javascript click事件侦听器中创建间隔。如果您只使用一个地方打印秒数，则以下代码正常工作

var x=document.getElementsByClassName('session'),
    interval;

x[0].addEventListener('click', function(){
  if(interval){
    clearInterval(interval);
  }
  interval = setInterval(changeSessionDuration,100)
}, false); 

var seconds=60;

function increase(){
  for (var i=0;i<x.length;i++){
    x[i].innerHTML++;
  }
}

function decrease(){
  for (var i=0;i<x.length;i++){
    if(x[i].innerHTML>0){
        x[i].innerHTML--;
    }
  }
}

var session=x[0].innerHTML-1;

function changeSessionDuration(){
  if (seconds>0){
   seconds--;
  if(seconds==0 && session>0){
     session--;
     seconds=60;
  }
}
 x[0].innerHTML=session +':'+seconds;
}

如何在JavaScript中设置计时器持续时间？

2 个答案: