时间戳

首页 > 解决方案 > 按钮 onClick() 函数未在 JavaScript 中第二次执行

javascript - 按钮 onClick() 函数未在 JavaScript 中第二次执行

问题描述

我的网页模拟电视，这意味着用户可以通过点击按钮在频道之间切换。

频道应根据经过的时间显示视频。初始设置工作正常，即如果我在第 10 秒更改频道，下一个频道在第 10 秒开始播放，依此类推。

但是用于将时间重置为零的开始按钮不起作用。

<div id="videoSelect">
  <button data-video-url="vid1.mp4" onclick="startTime()">Start</button>
  <button data-video-url="vid2.mp4" onclick="getTime()">Channel 1</button>
  <button data-video-url="vid3.mp4" onclick="getTime()">Channel 2</button>
</div>

<video id="player" controls></video>

<script type="text/javascript">
  var startTime, endTime, seconds;
  //var cnt1=0, cnt2=0, cnt3=0;

  function startTime() {
    seconds = 0;
    startTime = new Date();
  }


  function getTime() {
    endTime = new Date();
    var timeDiff = endTime - startTime; //in ms
    // strip the ms
    timeDiff /= 1000;

    // get seconds 
    seconds = Math.round(timeDiff);
    //document.write(seconds);
  }

  function swapVideo() {
    player.src = this.getAttribute("data-video-url");
    player.load();
    player.currentTime = seconds;
    player.play();
  }

  var videoPlayButtons = document.querySelectorAll("button"),
    player = document.getElementById("player");

  for (var i = 0; i < videoPlayButtons.length; i++) {
    videoPlayButtons[i].addEventListener('click', swapVideo);
  }
</script>

标签： javascripthtml

解决方案

您正在使用变量“startTime”覆盖您的函数“startTime()”，因为它们具有相同的名称。尝试将函数的名称更改为 resetTimer() 或其他名称，它会起作用。

    var startTime, endTime, seconds;

    function startTime() {
      seconds=0;
      startTime = new Date();
    }

推荐阅读