tinfanide Posted October 18, 2011 Share Posted October 18, 2011 var str = "These are pretty girls";var arr = str.split(" ");var show = setTimeout(function(){ for(var i=0; i<arr.length; i++){ document.getElementById("div").innerHTML += arr[i] + " / "; } if(i>arr.length){clearTimeout(show)} },1000) I converted strings into array and wanted to use the for loop and setTimeout to show words one by one by 1000ms.But they all showed up together. Can anyone tell me what's wrong with the scripts? Link to comment Share on other sites More sharing options...
thescientist Posted October 18, 2011 Share Posted October 18, 2011 isn't that what you're telling the function to do? for(var i=0; i<arr.length; i++){ document.getElementById("div").innerHTML += arr[i] + " / ";} i.e. var str = "This is some text";var arr = str.split(" ");var idx = 0; var show = setTimeout(function(){ if(idx < arr.length){ document.getElementById('div').innerHTML += arr[idx] + ' / '; idx++; }else{ clearTimeout(show); };}, 1000); Link to comment Share on other sites More sharing options...
tinfanide Posted October 18, 2011 Author Share Posted October 18, 2011 var str = "These are pretty girls";var arr = str.split(" ");var i = -1;function show1(){clearTimeout(display);i+=1;document.getElementById("div").innerHTML += str.substr(str.indexOf(arr[i]),arr[i].length) + " ";if(i<arr.length){ var display = setTimeout(show1,1000) } else { clearTimeout(display); }} I think my code that I've just sorted out works in a similar manner. It shows word by word though. But yours just show the first word (arr[0]). Link to comment Share on other sites More sharing options...
thescientist Posted October 18, 2011 Share Posted October 18, 2011 my mistake, I meant to use setInterval. setTimeout will only run once. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Test Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var str = "This is some text"; var arr = str.split(" "); var idx = 0; var show = setInterval(function(){ console.log('idx => ' + idx); if(idx < arr.length){ console.log(arr[idx]); document.getElementById('container').innerHTML += arr[idx] + ' '; idx++; }else{ console.log("clear"); clearInterval(show); }; }, 1000); </script> </head> <body> <div id="container"></div> </body></html> Link to comment Share on other sites More sharing options...
tinfanide Posted October 18, 2011 Author Share Posted October 18, 2011 Just a little stupid question: Can I include these codes in an external JS file? var str = "These are pretty girls";var arr = str.split(" ");var i = -1;function show1(){clearTimeout(display);i+=1;document.getElementById("div").innerHTML += str.substr(str.indexOf(arr[i]),arr[i].length) + " ";if(i<arr.length){ var display = setTimeout(show1,1000) } else { clearTimeout(display); }} And add <script type="text/javascript" src="wordScroller.js"></script><script>window.onload = function(){show1();}</script> But it does not work andshow1() is reported as not defined Link to comment Share on other sites More sharing options...
tinfanide Posted October 18, 2011 Author Share Posted October 18, 2011 This is very nice. Learnt more about that there're more choices for this type of animation. I've just thought of using substr(). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.