5秒后停止Javascript函数/设置。5秒钟后的Blur（）

-3

我试图让使用.Blur（）但使用setTimeout和setInterval 5秒后失去焦点的按钮与代码I正在使用。5秒后停止Javascript函数/设置。5秒钟后的Blur（）

我使用VideoJS获取视频中的时间，并在1到10秒之间，ID为'butt6'的按钮应该更改为焦点正在工作。
我遇到的问题是在5秒后无法聚焦。

在代码中，我得到了1到10秒，并且我已将setTimeout设置为5秒来测试它是否正在工作，但它不是，并且当前依赖于elseif .blur（）在10秒钟后失去焦点。

我搜索了互联网，试图找到可能有类似问题的其他人，但我迄今为止尝试过的所有内容都没有关注按钮，或者根本没有取消关注。

代码如下：

var myPlayer = document.getElementById('my_video_1'); 
var myFunc = function(){ 
    var whereYouAt = myPlayer.currentTime; 
    if (whereYouAt > 1 && whereYouAt <= 10){ 
     var linkToFocus = document.getElementById('butt6'); 
     linkToFocus.focus(); 
     setTimeout(function(){ linktoFocus.blur(); }, 5000); 
    } 
    elseif (whereYouAt > 11){ 
    linkToFocus.blur(); 
} 
myPlayer.addEventListener('timeupdate',myFunc,false);

来源

2017-01-03 Aaron

你有没有试过把注意力放在另一个元素上，使它失去焦点？ –

我有。原始代码通过4个按钮运行，每间隔3秒钟后将其聚焦。理想情况下，我只想专注几秒钟，然后消除焦点。但有多个if函数不会集中任何东西 – Aaron

'mPlayer.currentTime'看起来像一个需要调用的方法。 [参考]（http://docs.videojs.com/docs/api/player.html#MethodscurrentTime） –

我相信问题是if继续执行和setTimeout后对焦。这应该解决：

var myPlayer = document.getElementById('my_video_1'); 
var hasFocus = false; 
var myFunc = function(){ 
    var whereYouAt = myPlayer.currentTime; 
    if (whereYouAt > 1 && whereYouAt <= 10 && !hasFocus){ 
     var linkToFocus = document.getElementById('butt6'); 
     linkToFocus.focus(); 
     hasFocus = true; 
     setTimeout(function(){ linktoFocus.blur(); }, 5000); 
    } 
} 
myPlayer.addEventListener('timeupdate',myFunc,false);

来源

2017-01-03 21:49:06 Tiago

谢谢您的建议蒂亚戈，并在延迟响应道歉。
不幸的是，'setTimeout'不起作用，但使用.blur（）我设法将焦点从按钮上移开，并用CSS中的伪类格式化以进行转换。

我的最终代码如下，供参考。

.btn-sq { 
      width: 90px !important; 
      height: 90px !important; 
      font-size: 14px; 
      background-color:rgba(255,255,255,1); 
      margin: 5px; 
      color:#000; 
      white-space: normal; 
      -o-transition:color .2s ease-out, background-color .2s ease-in; 
      -ms-transition:color .2s ease-out, background-color .2s ease-in; 
      -moz-transition:color .2s ease-out, background-color .2s ease-in; 
      -webkit-transition:color .2s ease-out, background-color .2s ease-in; 
      transition:color .2s ease-out, background-color .2s ease-in; 

     } 

     .btn-sq:hover { 
      width: 90px !important; 
      height: 90px !important; 
      font-size: 14px; 
      background-color:#C10000; 
      margin: 5px; 
      color:#fff; 
      white-space: normal; 
      -o-transition:color .2s ease-out, background-color .2s ease-in; 
      -ms-transition:color .2s ease-out, background-color .2s ease-in; 
      -moz-transition:color .2s ease-out, background-color .2s ease-in; 
      -webkit-transition:color .2s ease-out, background-color .2s ease-in; 
      transition:color .2s ease-out, background-color .2s ease-in; 
     } 

     .btn-sq:focus { 
      width: 90px !important; 
      height: 90px !important; 
      font-size: 14px; 
      background-color:#C10000; 
      margin: 5px; 
      color:#fff; 
      white-space: normal; 
      -o-transition:color .2s ease-out, background-color .2s ease-in; 
      -ms-transition:color .2s ease-out, background-color .2s ease-in; 
      -moz-transition:color .2s ease-out, background-color .2s ease-in; 
      -webkit-transition:color .2s ease-out, background-color .2s ease-in; 
      transition:color .2s ease-out, background-color .2s ease-in; 
     }  


<script> 
    var myPlayer = document.getElementById('my_video_1'); 
    var myFunc = function(){ 
     var whereYouAt = myPlayer.currentTime; 
     if (whereYouAt > 1 && whereYouAt <= 10){ 
      var linkToFocus = document.getElementById('butt1'); 
      linkToFocus.focus(); 
      setInterval(function(){ linktoFocus.blur(); }, 4000); 
     } 
     else if (whereYouAt > 11){ 
      var linkToFocus = document.getElementById('butt1'); 
      linkToFocus.blur(); 
     } 
    } 
    myPlayer.addEventListener('timeupdate',myFunc,false); 
</script>

来源

2017-01-12 20:45:25 Aaron

5秒后停止Javascript函数/设置。5秒钟后的Blur（）

回答

相关问题