JavaScript OnClick（）启动卡拉OK文本？

Question

我正在尝试使用卡拉OK主题，其中有歌曲播放和文字阅读。我遇到的问题是当页面加载卡拉OK时自动启动。我想制作一个按钮功能，允许用户按下它，然后文本开始跟随卡拉OK模式，而不是在页面加载时。

＆＃13;

＆＃13;

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]);
}

＆＃13;

#fontstyle {
    font-size: 20pt;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为您在document.ready处理程序中调用了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>

{{1}}

Answer 2

删除nextWord();内的$(document).ready。

你可以开始你的卡拉OK：

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

Answer 3

你需要添加：

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

这样当您单击播放按钮时，文本将显示并开始突出显示蓝色文本

＆＃13;

＆＃13;

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]);
}

＆＃13;

#fontstyle {
    font-size: 20pt;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

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]);
}

＆＃13;

#fontstyle {
  font-size: 20pt;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;