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

回答

相關問題