使用html5音頻中的文本鏈接來打開/關閉javascript執行

Question

我正在使用代碼突出顯示根據時間“ on”而讀取的單詞，並且默認情況下處於啟用狀態。 我需要它默認保持打開狀態，但是在“文本鏈接”上添加一個可以打開/關閉突出顯示功能（因此，單擊時沒有突出顯示。因此，當我單擊單詞“ Disable”時，它將禁用執行代碼中的“禁用”一詞會自動更改為“啟用”一詞，與此相反。等等。

這是代碼片段：

 var spns = document.getElementsByTagName("SPAN"); var audi = document.getElementById("adi"); audi.addEventListener("timeupdate", f1); function f1(){ var i; for (i = 0 ; i< spns.length ; i++){ var time = Number(spns[i].id.slice(2)); if(time < audi.currentTime){ if (i>0) spns[i -1].style.backgroundColor = "white"; spns[i].style.backgroundColor = "red"; } } } 

 <audio id = "adi" controls> <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"></source> </audio> <div> <pre> <span id="ts0.5">Ok, we're trying this for a second time</span> , <span id="ts3">to test the ability...</span> </pre> </div> 

Answer 1

我將使用CSS並根據父級的類別來確定跨度。 這使邏輯更好地減少了復雜性。

 var textHighlightOn = true, btnToggle = document.getElementById('toggleTxt'), textDiv = document.querySelector('.text-highlight') spns = document.getElementsByTagName("SPAN"), audi = document.getElementById("adi"); audi.addEventListener("timeupdate", f1); function f1(){ var i; for (i = 0 ; i< spns.length ; i++){ var time = Number(spns[i].id.slice(2)); if(time < audi.currentTime){ if (i>0) { spns[i -1].classList.remove('active'); spns[i -1].classList.add('active-prev'); } spns[i].classList.add('active'); } } } btnToggle.addEventListener("click", function(){ if(textHighlightOn){ textDiv.classList.add('off'); } else { textDiv.classList.remove('off'); } this.innerHTML = 'Highlight ' + (textHighlightOn ? 'off ' : ' on'); textHighlightOn = !textHighlightOn; }); 

 body { background: #008000; } .text-highlight span.active-prev { background: #fff; } .text-highlight span.active { background: #03a9f4; } .text-highlight.off span { background: transparent; } 

 <audio id="adi" controls> <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"/> </audio> <button id="toggleTxt">Highlight on</button> <div class="text-highlight"> <pre> <span id="ts0.5">Ok, we're trying this for a second time</span> , <span id="ts3">to test the ability...</span> </pre> </div> 

Answer 2

您可以使用removeEventListener ： audi.removeEventListener(f1)

或者，您可以在f1()函數之前擁有一個函數， var enabled = true ，在f1中，如果enabled === false ，則enabled === false開始返回，然后編寫按鈕單擊偵聽器以更改已enabled變量。