Javascript - 获取链接点击的时间

Javascript - get time of link click

本文关键字:时间 链接 获取 Javascript      更新时间:2023-09-26

我有一个带有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,直到视频停止播放。我想做的是在单击两个隐藏链接之一后立即以毫秒为单位获取 unix 时间并将其存储到变量中。最后,Id 喜欢将其作为 post 参数附加到两个 URL 中(将 ?=time 连接到 url 的末尾)

关于如何实现这一目标的任何想法?我可以在视频停止后立即获得时间的问题,但它不会将其添加到 url 上,大概是因为页面第一次加载后 url 已经写入。是否可以在事后修改该网址?

根据您的评论,您希望在给定点更新两个链接的 href 属性,将当前时间添加为 url 末尾的GET var,然后当用户向左或向右单击时,您希望导航到存储在被单击元素的 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>