Javascript 计数器函数 onload 不起作用

标签 javascript jquery html

我正在尝试修改这个 fiddle ,以便它启动计数器加载,但是当我在 body 标签上使用 onload 时,它似乎不起作用。我错过了什么?看起来代码很简单。 下面是原始的 fiddle 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>

最佳答案

从您的代码中删除 startTimer(m, s)ms 没有定义。

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

关于Javascript 计数器函数 onload 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42524739/

相关文章:

javascript - 将图像上传到运行时创建的指定文件夹和子文件夹

javascript - 如何在 ui-router AngularJS 中使用组件模板?

javascript - 如何在按 Enter 键时清除文本输入框(在 div 中)?

javascript - 使用新键合并特定对象数组

html - 证明跨度之间的内容

javascript - 滚动 300 像素后显示粘性标题

javascript - 单击时未定义 C# razor 对象

javascript - jQuery 可以给我一个按类名排除某些子标签的子级列表吗?

html - 文本消失在容器后面

jquery - ajax微调器开始停止不起作用