JavaScript OnClick（）啓動卡拉OK文字？

我正在嘗試使用歌曲播放和文本閱讀的卡拉OK主題。我遇到的問題是，當頁面加載卡拉OK自動啓動。我想製作一個按鈕功能，允許用戶按下它，然後文本開始跟隨卡拉OK模式，而不是在頁面加載時。JavaScript OnClick（）啓動卡拉OK文字？

var songtext; 
 
$(document).ready(function() { 
 
    songtext = [ // [text, duration] 
 
     ["My Little Pony, My Little Pony", 1500], 
 
     ["</br> Ahh, ahh, ahh, ahhh...", 1500], 
 
     ["</br> (My Little Pony)", 3500], 
 
     ["</br> I used to wonder what friendship could be", 1500], 
 
     ["</br> (My Little Pony)", 3500], 
 
     ["</br> Until you all shared its magic with me", 1500], 
 
     ["</br> Big adventure", 900], 
 
     ["</br> Tons of fun", 900], 
 
     ["</br> A beautiful heart", 900], 
 
     ["</br> Faithful and strong", 900], 
 
     ["</br> Sharing kindness!", 900], 
 
     ["</br> It's an easy feat", 900], 
 
     ["</br> And magic makes it all complete", 900], 
 
     ["</br> You have my little ponies", 900], 
 
     ["</br> Do you know you're all my very best friends?", 1000], 
 
     ["</br> My Little Pony", 800], 
 
     ["</br> My Little Pony", 800], 
 
     ["</br> My Little Pony... friends", 1000], 
 

 
    ]; 
 
    var text=""; 
 
    $.each(songtext, function(a, b) { 
 
     text += "<span id='p"+a+"' style='color:black'>" + b[0] + "</span> "; 
 
    }); 
 

 
    $('#div').html(text); 
 

 
    cc=0; 
 

 
    nextWord(); 
 
}); 
 

 
var cc = 0; 
 
function nextWord() { 
 
    $('#p'+cc).css("color", "blue"); 
 
    cc++; 
 
    if(cc> songtext.length-1) return; 
 
    window.setTimeout(nextWord, songtext[cc-1][1]); 
 
}

#fontstyle { 
 
    font-size: 20pt; 
 

 
}

<script src="https://github.com/padolsey-archive/jquery.lint--old/blob/master/jquery.lint.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div"></div> 
 

 
<button type="button">Play</button>

來源

2015-09-28 Edgar Axe

所以現在的問題是如何將功能附加到點擊？這怎麼可能無法通過谷歌提供？ – 1252748

當我閱讀JavaScript時，這首歌立刻開始在我腦海中彈奏！（注意：我有一個女兒） –

@DivineComedian是的，這是一個我們正在爲小孩建造的項目。 –

這是因爲你在document.ready處理程序調用nextWord。把它放在按鈕的點擊手柄內：

var songtext; 
 
$(document).ready(function() { 
 
    songtext = [ // [text, duration] 
 
    ["My Little Pony, My Little Pony", 1500], 
 
    ["</br> Ahh, ahh, ahh, ahhh...", 1500], 
 
    ["</br> (My Little Pony)", 3500], 
 
    ["</br> I used to wonder what friendship could be", 1500], 
 
    ["</br> (My Little Pony)", 3500], 
 
    ["</br> Until you all shared its magic with me", 1500], 
 
    ["</br> Big adventure", 900], 
 
    ["</br> Tons of fun", 900], 
 
    ["</br> A beautiful heart", 900], 
 
    ["</br> Faithful and strong", 900], 
 
    ["</br> Sharing kindness!", 900], 
 
    ["</br> It's an easy feat", 900], 
 
    ["</br> And magic makes it all complete", 900], 
 
    ["</br> You have my little ponies", 900], 
 
    ["</br> Do you know you're all my very best friends?", 1000], 
 
    ["</br> My Little Pony", 800], 
 
    ["</br> My Little Pony", 800], 
 
    ["</br> My Little Pony... friends", 1000], 
 

 
    ]; 
 
    var text = ""; 
 
    $.each(songtext, function(a, b) { 
 
    text += "<span id='p" + a + "' style='color:black'>" + b[0] + "</span> "; 
 
    }); 
 

 
    $('#div').html(text); 
 

 
    cc = 0; 
 
    $('button').on('click', function(e) { 
 
    e.preventDefault(); 
 
    nextWord(); 
 
    }); 
 
}); 
 

 
var cc = 0; 
 

 
function nextWord() { 
 
    $('#p' + cc).css("color", "blue"); 
 
    cc++; 
 
    if (cc > songtext.length - 1) return; 
 
    window.setTimeout(nextWord, songtext[cc - 1][1]); 
 
}

#fontstyle { 
 
    font-size: 20pt; 
 
}

<script src="https://github.com/padolsey-archive/jquery.lint--old/blob/master/jquery.lint.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div"></div> 
 

 
<button type="button">Play</button>

來源

2015-09-28 14:58:31 hjpotter92

感謝它的工作完美也謝謝你解釋！ –

您需要添加：

$('.play').on('click', function() { 
    $('#div').html(text); 
    cc=0; 
    nextWord(); 
});

這樣，當你點擊播放按鈕，則文本將顯示與啓動藍色文字突出顯示

var songtext; 
 
$(document).ready(function() { 
 
    songtext = [ // [text, duration] 
 
     ["My Little Pony, My Little Pony", 1500], 
 
     ["</br> Ahh, ahh, ahh, ahhh...", 1500], 
 
     ["</br> (My Little Pony)", 3500], 
 
     ["</br> I used to wonder what friendship could be", 1500], 
 
     ["</br> (My Little Pony)", 3500], 
 
     ["</br> Until you all shared its magic with me", 1500], 
 
     ["</br> Big adventure", 900], 
 
     ["</br> Tons of fun", 900], 
 
     ["</br> A beautiful heart", 900], 
 
     ["</br> Faithful and strong", 900], 
 
     ["</br> Sharing kindness!", 900], 
 
     ["</br> It's an easy feat", 900], 
 
     ["</br> And magic makes it all complete", 900], 
 
     ["</br> You have my little ponies", 900], 
 
     ["</br> Do you know you're all my very best friends?", 1000], 
 
     ["</br> My Little Pony", 800], 
 
     ["</br> My Little Pony", 800], 
 
     ["</br> My Little Pony... friends", 1000], 
 

 
    ]; 
 
    var text=""; 
 
    $.each(songtext, function(a, b) { 
 
     text += "<span id='p"+a+"' style='color:black'>" + b[0] + "</span> "; 
 
    }); 
 

 
    $('.play').on('click', function() { 
 
     $('#div').html(text); 
 
     cc=0; 
 
     nextWord(); 
 
    }); 
 
    
 

 
    
 

 
    
 
}); 
 

 
var cc = 0; 
 
function nextWord() { 
 
    $('#p'+cc).css("color", "blue"); 
 
    cc++; 
 
    if(cc> songtext.length-1) return; 
 
    window.setTimeout(nextWord, songtext[cc-1][1]); 
 
}

#fontstyle { 
 
    font-size: 20pt; 
 

 
}

<script src="https://github.com/padolsey-archive/jquery.lint--old/blob/master/jquery.lint.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div"></div> 
 

 
<button type="button" class="play">Play</button>

來源

2015-09-28 14:58:33 indubitablee

您的代碼不會從文檔的「準備好」處理程序中刪除'nextWord（）'調用，因此無論如何都會在頁面加載時立即啓動！ –

@ShotgunNinja，怎麼樣？ 'nextWord（）'在'click'函數中 – indubitablee

哦，沒關係;我誤解了你的代碼......除非你做了一個忍者編輯。 –

刪除nextWord();裏面的$(document).ready。

你就可以開始你的卡拉OK一樣：

<button type="button" onclick='nextWord();'>Play</button>

來源

2015-09-28 14:59:42 R3tep

var songtext; 
 
$(document).ready(function() { 
 
    songtext = [ // [text, duration] 
 
    ["My Little Pony, My Little Pony", 1500], 
 
    ["</br> Ahh, ahh, ahh, ahhh...", 1500], 
 
    ["</br> (My Little Pony)", 3500], 
 
    ["</br> I used to wonder what friendship could be", 1500], 
 
    ["</br> (My Little Pony)", 3500], 
 
    ["</br> Until you all shared its magic with me", 1500], 
 
    ["</br> Big adventure", 900], 
 
    ["</br> Tons of fun", 900], 
 
    ["</br> A beautiful heart", 900], 
 
    ["</br> Faithful and strong", 900], 
 
    ["</br> Sharing kindness!", 900], 
 
    ["</br> It's an easy feat", 900], 
 
    ["</br> And magic makes it all complete", 900], 
 
    ["</br> You have my little ponies", 900], 
 
    ["</br> Do you know you're all my very best friends?", 1000], 
 
    ["</br> My Little Pony", 800], 
 
    ["</br> My Little Pony", 800], 
 
    ["</br> My Little Pony... friends", 1000], 
 

 
    ]; 
 
    var text = ""; 
 
    $.each(songtext, function(a, b) { 
 
    text += "<span id='p" + a + "' style='color:black'>" + b[0] + "</span> "; 
 
    }); 
 

 
    $('#div').html(text); 
 

 
    cc = 0; 
 
    $('button').on('click', function(e) { 
 
    e.preventDefault(); 
 
    nextWord(); 
 
    }); 
 
}); 
 

 
var cc = 0; 
 

 
function nextWord() { 
 
    $('#p' + cc).css("color", "blue"); 
 
    cc++; 
 
    if (cc > songtext.length - 1) return; 
 
    window.setTimeout(nextWord, songtext[cc - 1][1]); 
 
}

#fontstyle { 
 
    font-size: 20pt; 
 
}

<script src="https://github.com/padolsey-archive/jquery.lint--old/blob/master/jquery.lint.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div"></div> 
 

 
<button type="button">Play</button>

來源

2015-09-28 15:02:18 sheeju

JavaScript OnClick（）啓動卡拉OK文字？

回答

相關問題