Question

我正在尝试修改这个小提琴，以便它启动计数器onload，但是当我在body标签上使用onload时，它似乎不起作用。我错过了什么？看起来代码很简单。下面是原始的小提琴 Original fiddle

var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";

startTimer(m, s)

function startTimer(m, s) {
  timer.textContent = m + ":" + s;
  if (s == 0) {
    if (m == 0) {
      return;
    } else if (m != 0) {
      m = m - 1;
      s = 60;
    }
  }

  s = s - 1;
  id = setTimeout(function() {
    startTimer(m, s)
  }, 1000);
}

function pauseTimer() {
  value = timer.textContent;
  clearTimeout(id);
}

function resumeTimer() {
  var t = value.split(":");

  startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}

start.addEventListener("click", function() {
  startTimer(5, 0);
}, false);

pause.addEventListener("click", pauseTimer, false);

resume.addEventListener("click", resumeTimer, false);

<body onload="startTimer(5, 0);">

  <p id="timer">00:00</p>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="resume">Resume</button>

</body>

Answer 1

从您的代码中删除startTimer(m, s)。 m和s未定义。

<body onload="startTimer(5, 0);">

  <p id="timer">00:00</p>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="resume">Resume</button>

</body>

<script>
  var timer = document.getElementById("timer");
  var start = document.getElementById("start");
  var pause = document.getElementById("pause");
  var resume = document.getElementById("resume");
  var id;
  var value = "00:00";



  function startTimer(m, s) {
    timer.textContent = m + ":" + s;
    if (s == 0) {
      if (m == 0) {
        return;
      } else if (m != 0) {
        m = m - 1;
        s = 60;
      }
    }

    s = s - 1;
    id = setTimeout(function() {
      startTimer(m, s)
    }, 1000);
  }

  function pauseTimer() {
    value = timer.textContent;
    clearTimeout(id);
  }

  function resumeTimer() {
    var t = value.split(":");

    startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
  }

  start.addEventListener("click", function() {
    startTimer(5, 0);
  }, false);

  pause.addEventListener("click", pauseTimer, false);

  resume.addEventListener("click", resumeTimer, false);
</script>

Answer 2

现有的答案似乎都没有解决您的实际问题，即执行顺序。

您的onload="startTimer(…)"事件无效的原因是脚本本身设置为执行'onLoad'，因此onload="…"在脚本运行之前触发，这意味着startTimer isn尚未确定。

通过将JavaScript“加载类型”更改为“无包装＆lt; body＆gt; ”（请参阅http://imgur.com/79p4wO6），您可以使用onLoad=以您期望的方式归因于：

http://jsfiddle.net/wwg8H/31/

Answer 3

将startTimer(m,s)移到底部：

var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";

function startTimer(m, s) {
    timer.textContent = m + ":" + s;
    if (s == 0) {
        if (m == 0) {
            return;
        } else if (m != 0) {
            m = m - 1;
            s = 60;
        }
    }

    s = s - 1;
    id = setTimeout(function () {
        startTimer(m, s)
    }, 1000);
}

function pauseTimer() {
    value = timer.textContent;
    clearTimeout(id);
}

function resumeTimer() {
    var t = value.split(":");

    startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}

start.addEventListener("click", function () {
    startTimer(5, 0);
}, false);

pause.addEventListener("click", pauseTimer, false);

resume.addEventListener("click", resumeTimer, false);

startTimer(5,0);  // <----------

Answer 4

删除startTimer（m，s）

＆＃13;

var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";


function startTimer(m, s) {
  timer.textContent = m + ":" + s;
  if (s == 0) {
    if (m == 0) {
      return;
    } else if (m != 0) {
      m = m - 1;
      s = 60;
    }
  }

  s = s - 1;
  id = setTimeout(function() {
    startTimer(m, s)
  }, 1000);
}

function pauseTimer() {
  value = timer.textContent;
  clearTimeout(id);
}

function resumeTimer() {
  var t = value.split(":");

  startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}

start.addEventListener("click", function() {
  startTimer(5, 0);
}, false);

pause.addEventListener("click", pauseTimer, false);

resume.addEventListener("click", resumeTimer, false);

＆＃13;

<body onload="startTimer(5, 0);">

  <p id="timer">00:00</p>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="resume">Resume</button>

</body>

＆＃13;

Answer 5

当浏览器从上到下呈现HTML页面时，您的Javascript将在加载正文内容后呈现。因此，Body - Onload事件无法调用您的startTimer方法，因为它在页面中尚不可用。

您可以将startTimer（5,0）调用移至脚本底部。

Javascript计数器函数onload无法正常工作

5 个答案: