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

How to set timer duration in JavaScript?

本文关键字：设置 计时器 持续时间 JavaScript      更新时间：2023-09-26

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

.CSS：

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

.HTML：

<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>

.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 = x[1].innerHTML - 1;
function changeSessionDuration() {
    if (seconds > 0) {
        seconds--;
        if (seconds == 0 && session > 0) {
            session--;
            seconds = 60;
        }
    }
    x[1].innerHTML = session + ':' + seconds;
}
如果我

正确理解您的问题，您的计时器没有在您事先添加计时器正在运行的正确时间启动？

如果是这样，那是因为这行：

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;
}

而且我的示例代码很脏，您应该适合您的口味。

发生这种情况是因为您没有清除先前设置的间隔。您需要在 javascript 单击事件侦听器中创建间隔。如果您只使用一个位置打印秒，下面的代码可以工作

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;
}
相关文章：