Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
link PowerPoint Presentation

link

121 Vues Download Presentation
Télécharger la présentation

link

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. link link

  2. 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("displaypic()","2000") }

  3. setTimeout("displaypic()","2000") • setTimeout • 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.

  4. Example: <script> function setToRed ( ) { document.getElementById("colorButton").style.color = "#FF0000"; setTimeout( "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:

  5. <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("myfunc()",1000) } </script> </head> <body onClick = “myfunc()”> <p> <imgsrc = "" width = "189" height = "267" id = "img1"> </p> </body> Link:

  6. link Example: <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = 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"  varnum = -1 function displaypic() { num= num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num setTimeout("displaypic()","2000") } </script> </head> <body> <h1> Vacation Pics </h1> <p><imgsrc = "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>

  7. Starting automatically… • So far we’ve started function in a couple of ways: • Primarily: onClick • Also: onMouseOverand 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.

  8. link So now we’d have: <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("myfunc()",1000) } </script> </head> <body onLoad= “myfunc()”> <p><imgsrc = "" width = "189" height = "267" id = "img1"> </p> </body>

  9. link What about this? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > varpicArray = new Array() picArray[0]="Images/Images/bg1.jpg" picArray[1]="Images/Images/bg2.jpg" picArray[2]="Images/Images/bg3.jpg" picArray[3]="Images/Images/bg4.jpg" picArray[4]="Images/Images/bg5.jpg“ varclrArray = new Array() clrArray[0]="#FFFF66" clrArray[1]="#FF0033" clrArray[2]="#FFFFFF" clrArray[3]="#112200" clrArray[4]="#88AA44“ varnum = -1 function displaypic() { num= num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("h11").style.background = "url("+picArray[num]+")" document.getElementById("h11").style.color = clrArray[num] setTimeout("displaypic()",2000) } </script> </head> <body onLoad = "displaypic()"> <h1 id = "h11"> Different Styles</h1> </body> </html>

  10. link What does this do? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> var count = 0 varycoord = 800 function myfunc() { if (count == 50) { count = 0 ycoord= 800 document.getElementById('img1').style.position = "absolute" } else { document.getElementById('img1').style.position = "absolute" ycoord= ycoord - 10 document.getElementById('img1').style.left = ycoord+"px" count = count + 1 } setTimeout("myfunc()",400) } </script> </head> <body onLoad = "myfunc()"> <p><imgsrc = "Images/train.jpg" width = "189" height = "267" id = "img1" ></p> </body> </html>

  11. link Game <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> var count = 0 varycoord = 0 varxcoord = 0 var total = 0 function myfunc() { if (count == 50) { count = 0 xcoord = 0 ycoord = 0 document.getElementById('h11').innerHTML = "Congratulations! You got " + total +"!" } else { document.getElementById('img1').src = "Images/gopher.jpg" document.getElementById('img1').style.position = "absolute" ycoord = Math.floor(Math.random() * 800) xcoord = Math.floor(Math.random() * 800) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px" count = count + 1 time = Math.floor(Math.random() * 250) + 1000 setTimeout("myfunc()",time) } } function func2() { total = total + 1 document.getElementById('h11').innerHTML = "You got " + total +"!" document.getElementById('img1').src = "Images/bang.png" } </script> </head> <body onLoad = "myfunc()"> <p><imgsrc = "Images/gopher.jpg" width = "189" height = "267" id = "img1" onMouseDown = "func2()"></p> <h1 id = "h11"> </h1> </body> </html>