Question

我正在尝试使用JS构建一个简单的计时器。到目前为止，我有：

var ms = 1500000;

var refresh = setInterval(function(){
    ms -= 1000;
    var minutes = Math.floor((ms / 1000 / 60));
    var seconds = Math.floor((ms / 1000) % 60);
    return {
        'minutes': minutes,
        'seconds': seconds
    };
},1000);

$(document).ready(function() {
      $('#minutes').html(refresh().minutes);
      $('#seconds').html(refresh().seconds);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="minutes"></div>
<div id="seconds"></div>

当我在Chrome中预览html文件时，我无法弄清楚为什么会出现分钟和秒数。我怀疑我正在调用该对象，但我不确定应该将refresh.minutes和refresh.seconds更改为。

Answer 1

setInterval不会返回传递给它的函数的结果。它返回可用于停止它的计时器的ID。你可以

在传递给setInterval的函数中设置HTML（并在文档准备好时启动计时器）或
在全局变量中存储分钟和秒数

作为示例如何使其发挥作用。

Answer 2

＆＃13;

const start = Date.now();
const target = Date.now() + 1*3600*1e3; 

const timeLeft = () => {
  const left = target - Date.now();
  if (left < 0) return false;
  return {
    min: Math.floor(left/60e3),
    sec: Math.floor((left/1e3)%60)
  };
};
let i; // for setInterval handler
const update = () => {
  let data = timeLeft();
  if (!data) {
    // stop the timer
    clearInterval(i);
    return;
  }
  $('#minutes').text(data.min);
  $('#seconds').text(data.sec);
};

// save setInterval result for ability to stop the timer
i = setInterval(update, 1000);
update();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<span id="minutes">0</span>:<span id="seconds">0</span>

＆＃13;

Answer 3

setInterval始终返回ID。它不是一个可以返回用户选择值的常规函数。

实现所需内容的最佳方法是直接从区间函数内部更新html。

var ms = 1500000;

$(document).ready(function() {
   setInterval(function(){
      ms -= 1000;
      var minutes = Math.floor((ms / 1000 / 60));
      var seconds = Math.floor((ms / 1000) % 60);
      $('#minutes').html(minutes);
      $('#seconds').html(seconds);

   },1000);
});

Javascript计时器没有显示？

3 个答案: