在html5音頻中使用文本鏈接切換javascript執行開關

我正在使用代碼來突出顯示取決於「on」時間的單詞，並且默認情況下它處於打開狀態。我需要它默認情況下，但在「文本鏈接」添加一個功能，可以打開/關閉突出顯示（所以點擊時沒有突出顯示，所以當我點擊「禁用」時，它會禁用執行代碼，和單詞「禁用」自動更改單詞「啓用」，這確實相反..等在html5音頻中使用文本鏈接切換javascript執行開關

這裏的是代碼片段：

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>

來源

2017-10-06 Mike

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener – mplungjan

我會使用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>

來源

2017-10-06 09:08:20

當我點擊它使整個文本與白色背景高亮按鈕。我需要它與一個正常的無色bg。 – Mike

@Mike，我不確定我是否在這裏跟着你，關心用截圖來演示？ –

https://jsfiddle.net/06x1c4ke/ – Mike

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

或者您可以在f1()函數var enabled = true和f1之前具有函數，如果返回enabled === false開頭，然後編寫您的按鈕單擊偵聽器以更改enabled變量。

來源

2017-10-06 09:06:31 TKoL

在html5音頻中使用文本鏈接切換javascript執行開關

回答

相關問題