setTimeout() What if you want to automatically cycle through the pics? So you don’t have to keep clicking the button to see the next pic Use the built-in JavaScript setTimeout() function function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num setTimeout(function(){displaypic()},2000)
setTimeout(function(){displaypic()}, 2000) Calls the function setTimeout, which causes javascript to STOP running – just freeze! It stops for the number specified (in milliseconds) After that many milliseconds, it calls the function specified So in the above example, setTimeout freezes javascript for 2000 milliseconds (or 2 seconds), and then after 2 seconds, it calls the function displaypic(), just as if you’d clicked on a button calling it.
Example: <script> </script> </head> <body> function setToRed ( ) { document.getElementById("colorButton").style.color = "#FF0000"; setTimeout ( function(){setToBlack()}, 2000 ); } function setToBlack ( ) { document.getElementById("colorButton").style.color = "#000000"; </script> </head> <body> <input type="button" name="clickMe" id="colorButton" value="Click me and wait!" onclick="setToRed()"> Link:
<script > var count = ‘on’ function myfunc() { if (count == ‘on’) { count = ‘off’ document. getElementById(“img1”).src = "Images/lightbulb.jpg" } else if (count == ‘off’) { count = ‘on’ document. getElementById(“img1”).src = “Images/black.jpg " setTimeout(function(){myfunc()},1000) </script> </head> <body > <p onClick = “myfunc()”> <img width = "189" height = "267" id = "img1"> Click Here to Start </p> </body> Link:
Starting automatically… So far we’ve started function in a couple of ways: Primarily: onClick Also: onMouseOver and onMouseOut If we want a function to start automatically, without our having to click or run our mouse over anything… We can use onLoad We’ll use it within the body tag, e.g., <body onload = “func()”> This means that when the body of your html page loads into the browser, func() will be executed.
<script > var count = 0 function myfunc() { if (count == 1) { count = 0 document. getElementById(“img1”).src = “Images/black.jpg " } else if (count == 0) { count = 1 document. getElementById(“img1”).src = "Images/lightbulb.jpg" setTimeout(function(){myfunc()},1000) </script> </head> <body onLoad = “myfunc()”> <p> <img width = "189" height = "267" id = "img1"> </p> </body> Link:
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = new Array() picArray[0]="Images/ kittyfur-back.jpg " picArray[1]=“Images/kittyhimself.jpg" picArray[2]="Images/kittybreakfast.jpg" picArray[3]="Images/kittyno-regrets.jpg" picArray[4]="Images/kttylemon.jpg" var num = -1 function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num setTimeout(function(){displaypic()},2000) </script> </head> <body> <h1> Vacation Pics </h1> <p><img src = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = “Start Slide Show" onClick = "displaypic()"> <p id = "p1">Image number </p> </body> </html> link
What about this?: link <script > var count = 0 function myfunc() { if (count == 1) { count = 0 document. getElementById(“img1”).src = " " } else if (count == 0) { count = 1 document. getElementById(“img1”).src = "Images/lightbulb.jpg" setTimeout(function(){myfunc()},1000) </script> </head> <body onLoad = “myfunc()”> <p><img src = "" width = "189" height = "267" id = "img1"> </p> </body>
What does this do? link <script> var ycoord = 800 var direction = 10 function myfunc() { document.getElementById('img1').style.position = "absolute" ycoord = ycoord + direction document.getElementById('img1').style.left = ycoord+"px" setTimeout(function(){myfunc()},400) } </script> </head> <body onLoad = "myfunc()"> <p><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" ></p> </body> </html> Modify to go up and down? Diagonally? To go back and forth?
What does this do? link <script> var leftedge = 50 var rightedge = 800 var ycoord = 800 var direction = 10 function myfunc() { document.getElementById('img1').style.position = "absolute" ycoord = ycoord + direction document.getElementById('img1').style.left = ycoord+"px" if (ycoord < leftedge) direction = direction * -1; } else if (ycoord > rightedge) setTimeout(function(){myfunc()},400) </script> </head> <body onLoad = "myfunc()"> <p><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" ></p> </body> </html> Modify to go up and down? Diagonally? To go back and forth?
Moving things by clicking: link var rightleft =0 function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px" } function MovecarLeft() { rightleft = rightleft -10 </script> </head> <body> <img src = “carimage.gif” width = “200” height = “200” id = “car”> <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()">
How do we check if the car is over the frog? var rightleft =0 var xpos =0 function startit() { Movefrog() } function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px" function MovecarLeft() { rightleft = rightleft -10 function Movefrog() { xpos = Math.floor(Math.random() * 650) document.getElementById(‘frog').style.left = xpos + "px" setTimeout("Movefrog()",20000) </script> </head> <body> <div id = "hi" style = "position: relative;"> <img src = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <img src = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> </div <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()"> <input type = "button" value = "start" onClick = "startit()"> link How do we check if the car is over the frog?
var rightleft =0 var xpos =0 Totalscore = 0 function startit() { Movefrog() } function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px“ if ((rightleft > (xpos - 11)) && (rightleft < (xpos + 11)) ) { document.getElementById(‘frog').src="Images/splat.png" totalscore = totalscore +10 document.getElementById('tot').innerHTML = "Total Score: "+totalscore xpos = 0 function MovecarLeft() { rightleft = rightleft -10 function Movefrog() { document.getElementById(‘frog').src="Images/frog.png“ xpos = Math.floor(Math.random() * 650) document.getElementById(‘frog').style.left = xpos + "px" setTimeout("Movefrog()",20000) </script> </head><body> <p id = “tot”>Score goes here<p> <img src = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <img src = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()"> <input type = "button" value = "start" onClick = "startit()"> link
Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number 3 var narr = new Array() narr[0] = “cat” narr[1] = “dog” Now the array narr at location 1 holds the word “dog”, and we can use narr[1] as if it is the word “dog” Parameters: <p onclick = “func(‘easy’)”> click here to call the function with the parameter ‘easy’ </p> <script> function func(easyorhard) { If (easyorhard == ‘easy’) … Now when you click on the paragraph, the word ‘easy’ is placed in the parameter easyorhard, so easyorhard can be used as if it is the word ‘easy’
Parameter Example: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x) { if (x == 'snow') { document.getElementById("h11").innerHTML = "it's snowing!" } else if (x == 'rain') { document.getElementById("h11").innerHTML = "it's raining!" else if (x == 'sun') { document.getElementById("h11").innerHTML = "it's sunny!" </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "p1" onClick = "showparam('snow')">click here for snow</p> <p id = "p2" onClick = "showparam('rain')">click here for rain</p> <p id = "p3" onClick = "showparam('sun')">click here for sun</p> </body> </html>
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function changepic(x) { document.getElementById('bigpic').src = x } function changebak() { document.getElementById('bigpic').src = “frog.jpg" </script> </head> <body > <table ><tr><td colspan = "4" height = "300" width = "300"> <img src = "frog.jpg" width = "250" height = "250" id = "bigpic"> </td></tr> <tr><td > <img src = "pic1.jpg" width = "40" height = "40" id = "img1" onMouseOver = "changepic('pic1.jpg')" onMouseOut = "changebak()"> </td><td> <img src = "pic2.jpg" width = "40" height = "40" id = "img2" onMouseOver = "changepic('pic2.jpg')" onMouseOut = "changebak()"> <img src = "pic3.jpg" width = "40" height = "40" id = "img3" onMouseOver = "changepic('pic3.jpg')" onMouseOut = "changebak()"> <img src = "pic4.jpg" width = "40" height = "40" id = "img4" onMouseOver = "changepic('pic4.jpg')" onMouseOut = "changebak()"> </td></tr></table> </body> </html> link
Functions can have more than one parameter link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function myFunction(x, y) { document.getElementById('p1').innerHTML = "Welcome " + x + ", the " + y; } </script> </head> <body> <p id = "p1">Results go here.</p> <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <button onclick="myFunction('Bob','Builder')">Try it</button> </body> </html> Parameters match in order: function myFunction( x, y) onClick = myFunction( ‘Harry Potter’, ‘Wizard’) onClick = myFunction( ‘Bob’ ‘Builder’)
Parameter Example: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x, y) { document.getElementById(x).innerHTML =y document.getElementById(x).style.fontSize = "150%"; } function goBack(x, y) document.getElementById(x).style.fontSize = "100%"; </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "snow" onMouseOver = "showparam('snow', 'it is snowing!')" onMouseOut = "goBack('snow', 'weather 1')">weather 1</p> <p id = "rain" onMouseOver = "showparam('rain', 'it is raining!')" onMouseOut = "goBack('rain', 'weather 2')">weather 2</p> <p id = "sun" onMouseOver = "showparam('sun', 'it is sunny')" onMouseOut = "goBack('sun', 'weather 3')">weather 3</p> </body> </html>
What is this code doing? link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> var race_on = true var ycoord = 5; function myfunc() { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById('img1').style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2() } else { setTimeout(function(){myfunc()},100) function func2() { document.getElementById('h11').innerHTML = "Snail won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 270px; left: 5px"> <input type = "button" onclick = "myfunc()" value = "start" ></p> </body> </html> What is this code doing? link
Add another snail for a race? link 1. add another snail image in your html code 2. DON’T WRITE ANOTHER FUNCTION TO DO THE SAME THING!! Add a parameter Could be the id of the image to move Or could put all ids into an array Then the parameter would be the number of the id in the array, e.g., <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = 5; function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> Add another snail for a race? link
Next, make both snails go at once: link Since one click cannot call more than one function (or a single function more than once): ADD ANOTHER FUNCTION A starting function This function will ‘call’ the other function twice: And the click in the html should now call the starting function: function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" … <input type = "button" onclick = "startit()" value = "start" > Next, make both snails go at once: link
Problem: both snails using the same y coordinate (why is this a problem?) Solution: an array for y coordinates as well as an array for ids: Then replace ycoord with ycoord[x]: var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x] + Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100)
<!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> All Together: link
<!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> Now, how do we add another snail? (3 lines in js and 1 line in the html code)
Link Next: Make them go backwards? race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) } } function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 320px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 630px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> Link Next: Make them go backwards?
Tougher: When a snail has a ycoord greater than 180, we want to reverse the direction. The easiest way to reverse the direction is to change the ycoordinate by a negative number instead of a positive number. To do that, we need a direction value (either 1 or negative 1) that we multiply the ycoordinate by. We need a different direction value for each snail: var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)
Add flipped pics: When snails go back towards the beginning, we want them facing the right direction: var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)
race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 40px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 190px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 340px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 650px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> All Together: Link: