Javascript - 获取链接点击时间

Question

我有一个带有 youtube 视频播放器的 django 模板页面，如下所示:

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: window.innerHeight - 20,
      width: window.innerWidth - 20,
      videoId: '{{video}}',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd1080');
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {
    if (event.data == 0) {
        document.getElementById('choices').style.display = "block";
    }
  }

</script>

<div id="choices" class="choiceBox">
    Which direction?<br>
    <a href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/left/">Left</a><br>
    <a href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/right/">Right</a>
</div>

一切正常，并不复杂。我有一个隐藏的 div，直到视频停止播放。我想要做的是在单击 2 个隐藏链接之一并将其存储到变量中后立即获取以毫秒为单位的 unix 时间。最后，我想将其作为 post 参数附加到两个 URL 中(将 ?=time 连接到 url 的末尾)

关于如何实现这一点有什么想法吗？我可以在视频停止后立即获得时间的问题，但它不会将其添加到 url 上，这大概是因为一旦页面第一次加载，url 就已经被写入了。是否可以事后修改该网址？

Answer 1

根据您的评论，您想要在给定点更新两个链接的 href 属性，将当前时间作为 GET var 添加到 url 的末尾，然后当用户单击左侧或是的，您想导航到存储在单击元素的 href 属性中的 url，接收页面上的 python 代码会将存储在 GET var 中的时间与当时的当前时间进行比较。这应该适合你:

// I'm going to call modUrls when the window loads
// you could do this wherever appropriate in your code
window.onload = modUrls;

function modUrls(e){
  // get the links
  var left = document.getElementById('left');
  var right = document.getElementById('right');
  //get the time
  var time =  new Date().getTime();
  // append the time page was loaded to the urls in each link
  left.href= left.href+'?time='+ time;
  right.href= right.href+'?time='+ time;

};



//everything below this line is just for testing you can leave it all out  
var left = document.getElementById('left');
var right = document.getElementById('right');
left.addEventListener("click", directionClicked, true)
right.addEventListener("click", directionClicked, true);
function directionClicked(e){
  e.preventDefault();
  
  alert('navigating to: '+this.href)
  window.location = this.href;
  
};

<div id="choices" class="choiceBox">
    Which direction?<br>
    <a id="left" href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/left/">Left</a><br>
    <a id="right" href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/right/">Right</a>
</div>