I am trying to understand JavaScript timers so I'm attempting to use JavaScript to keep time and then display text at the correct time and then change the text at another time. setInterval() will not work because I need the timer to be variable. To accomplish this requirement I want JavaScript to display text (lyrics of a song) at the appropriate time. I know there are many different types of video edition software to accomplish this but the assignment states use JavaScript to call functions at varying times. This is what I have so far:
<!DOCTYPE html> <html lang="en"> <head> <title>rightNtwo</title> <style type="text/css">
body{ margin:0px; background:#000; }
#bg_container{width:100%; height:100%; overflow:hidden; }
#bg{ width:100%; }
#content{ position:absolute; top:0px; padding:30px; font-family: FatCow color:#FFF; font-size:xx-large; text-shadow:#66CD00 1px 1px; }
</style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> </head> <body> <div id="bg_container"> <iframe width="100%" height="658px" src="https://www.youtube.com/embed/fj-10lIrboM?rel=0&controls=0&showinfo=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe> </div> <div id="content"> <!-- // Title // --> <h1 style="margin-left:5%; position:absolute; top:0px;">RightNtwo</h1> <!-- // Lyrics to be populated in empty <div></div> // --> <div style="margin-top: 490px;margin-left:5%;" id="changeText" ></div> <script type="text/javascript">
// array of strings to hold each verse of the song
var verse = ["Angels on the sideline", "Puzzled and amused", "Why did Father give these humans free will?",
"Now they're all confused", "Don't these talking monkeys know that Eden has enough to go around?",
"Plenty in this holy garden, silly monkeys","Where there's one you're bound to divide it right in two",
"Angels on the sideline", "Baffled and confused", "Father blessed them all with reason",
"And this is what they choose?", "Monkey killing monkey killing monkey over pieces of the ground",
"Silly monkeys", "Give them thumbs, they forge a blade", "And where there's one they're bound to divide it right in two",
"Monkey killing monkey killing monkey over pieces of the ground", "Silly monkeys", "Give them thumbs, they make a club to beat their brother down",
"How they've survived so misguided is a mystery","Repugnant is a creature who would squander the ability",
"To lift an eye to heaven, conscious of his fleeting time here", "Gotta divide it all right in two",
"Fight till they die over sun, over sky","They fight till they die over sea, over air" ,
"They fight till they die over blood, over love", "They fight till they die over words, polarizing",
"Angels on the sideline again", "Benched along with patience and reason", "Angels on the sideline again",
"Wondering where this tug of war will end", "Gotta divide it all right in two"];
// increment variable
var counter = 0;
// variable to hold target html element
var elem = document.getElementById("changeText");
//initial timeout to sync with first verse.
setTimeout(change, 38000);
//setTimeout(change,3000); <<== timeout till next verse but code falls through and executes this and ignores timeout above.
//setInterval(change, 3000); <<== does not work because changes are variable
// increment over verse[];
function change() {
elem.innerHTML = verse[counter];
counter++;
if(counter >= verse.length) { counter = 0; }
}
</script> </div> </body> </html>you can view it here Click Here/