Presentation is loading. Please wait.

Presentation is loading. Please wait.

setTimeout() What if you want to automatically cycle through the pics?

Published byYanti Tedjo Modified over 6 years ago

Similar presentations

Presentation on theme: "setTimeout() What if you want to automatically cycle through the pics?"— Presentation transcript:

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

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

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

4 <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 > <p onClick = “myfunc()”> <img width = "189" height = "267" id = "img1"> Click Here to Start </p> </body> Link:

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

6 <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 onClick = “myfunc()”> <p> <img width = "189" height = "267" id = "img1"> </p> </body> Link:

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

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

9 What does this do? <script> var ycoord = 800 var direction = 10
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?

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

11 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()">

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

13 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

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

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

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

17 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( name, job) onClick = myFunction( ‘Harry Potter’, ‘Wizard’) onClick = myFunction( ‘Bob’ ‘Builder’)

18 Parameter Example: link
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x, y) { document.getElementById(x).innerHTML =y } </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = “snow" onClick = "showparam('snow‘, ‘it is snowing!’)">click here for snow</p> <p id = “rain" onClick = "showparam('rain‘, ‘it is raining!’)">click here for rain</p> <p id = “sun" onClick = "showparam('sun‘, ‘it is sunny’)">click here for sun</p> </body> </html>

19 link <!DOCTYPE html><html><head>
<meta charset= "utf-8" /> <script> var ycoord = 5 function myfunc(x,y) { document.getElementById(x).style.position = "absolute" document.getElementById(x).style.top = y + "px" ycoord = ycoord + Math.floor(Math.random()*100) document.getElementById(x).style.left = ycoord+"px" setTimeout(function(){myfunc(x,y)},400) } function startfunc() { myfunc('img1',20) /* what’s happening here?*/ myfunc('img2',160) </script> </head> <body> <p ><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/train.jpg" width = "189" height = "267" id = "img2" style = "position: absolute; top: 160px; left: 5px"></p> <h1 style="color:white;" id = "h11"> </h1> <p style = "position: absolute; top: 270px; left: 5px"> <input type = "button" onclick = "startfunc()" value = "start" ></p> </body> </html> link

20

21 (Optional)Using keys on the keyboard:
Using your keyboard keys to call functions. Typing on the keyboard is considered an event in javaScript. So when we call a function, we call it with the parameter, event E.g., <body onKeyPress = “myfunc(event)"> (Remember onkeypress? It was in our list of ways to call functions, along with onMouseOver, onMouseOut, onClick, onLoad, etc. onKeyPress: when you press on a key, the function you named myfunc() is called. event – it means the activity the user takes on the web page This event – what the user did – must be passed into the function as a parameter.

22 .keyCode When you press on a key, it has a number associated with it.
That’s the keycode. E.g., function myfunc(keys) { if (keys.keyCode == 39) { document.getElementById("p1").innerHTML = "You pushed the right arrow" } else if (keys.keyCode == 37) { document.getElementById("p1").innerHTML = "You pushed the left arrow"

23 Putting it together: link
<html><head> <script> function getarrows(keys) { if (keys.keyCode == 39) { document.getElementById("p1").innerHTML = "You pushed the right arrow" } else if (keys.keyCode == 37) { document.getElementById("p1").innerHTML = "You pushed the left arrow" else if (keys.keyCode == 38) { document.getElementById("p1").innerHTML = "You pushed the up arrow" else if (keys.keyCode == 40) { document.getElementById("p1").innerHTML = "You pushed the down arrow" </script> </head> <body onkeypress = "getarrows(event)"> <p id = "p1"> Which arrow did you push? </p> </body> </html>

24 Another example: link <html><head> <script> var opacity = .02 function changeopacity(currkey) { if (currkey.keyCode == 38) { opacity += .03 document.getElementById("zombie").style.opacity = opacity } else if (currkey.keyCode == 40) { opacity -= .03 </script> </head> <body onkeypress = "changeopacity(event)"> <p><img src = "Images/Zombie.gif" id = "zombie" width= "150" height = "150" style = "opacity: .02;"></p> </body> </html>

25 Other keycodes: Key Code e 69 f 70 g 71 h 72 i 73 j 74 k 75 l 76 m 77
n 78 o 79 p 80 q 81 r 82 s 83 t 84 u 85 v 86 w 87 Key Code backspace 8 tab 9 enter 13 shift 16 ctrl 17 alt 18 pause/break 19 caps lock 20 escape 27 page up 33 page down 34 end 35 home 36 Key left arrow Code 37 up arrow 38 right arrow 39 down arrow 40 insert 45 delete 46 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 a 65 b 66 c 67 d 68

26 link var rightleft =0 var xpos =0 Totalscore = 0 function startit()
{ Movefrog() } function Movecar(direction) { if (direction.keyCode == 39) { rightleft = rightleft + 10 document.getElementById(“car").style.left = rightleft + "px" else if (direction.keyCode == 37) { rightleft = rightleft -10 if ((rightleft > (xpos - 11)) && (rightleft < (xpos + 11)) ) { document.getElementById(‘frog').src="Images/splat.png" totalscore += 10 document.getElementById('tot').innerHTML = "Total Score: "+totalscore xpos = 0 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 onkeypress = “Movecar(event)”><p id = “tot”>Score goes here<p> <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 <input type = "button" value = "start" onClick = "startit()"> link

Download ppt "setTimeout() What if you want to automatically cycle through the pics?"

Similar presentations

function coffeeinfo() { document.getElementById('p3').innerHTML = The word 'coffee' was.

function coffeeinfo() { document.getElementById('p3').innerHTML = "The word 'coffee' was.
JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.

JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.

JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
Computer Science 103 Chapter 4 Advanced JavaScript.

Computer Science 103 Chapter 4 Advanced JavaScript.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.

JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction The JavaScript Programming.

Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction The JavaScript Programming.
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,

1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.

Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.

CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,

Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,

Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54

Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
Game var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 1000 document.getElementById('img1').src = Images/gopher.jpg document.getElementById('img1').style.position.

Game var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 1000 document.getElementById('img1').src = "Images/gopher.jpg" document.getElementById('img1').style.position.
44238: Dynamic Web-site Development Client Side Programming Ian Perry Room:C48 Extension:7287

44238: Dynamic Web-site Development Client Side Programming Ian Perry Room:C48 Extension:7287
Event JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is.

Event JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is.
CSS1 Dynamic HTML Objects, Collections & Events. CSS2 Introduction Dynamic HTML treats HTML elements as objects. Element’s parameters can be treated as.

CSS1 Dynamic HTML Objects, Collections & Events. CSS2 Introduction Dynamic HTML treats HTML elements as objects. Element’s parameters can be treated as.
Given the following code, what picture is displayed in the second image on the page when the first image is clicked on the first time? ___________________________.

Given the following code, what picture is displayed in the second image on the page when the first image is clicked on the first time? ___________________________.
Introduction To JavaScript. Putting it Together (page 11) All javascript must go in-between the script tags. All javascript must go in-between the script.

Introduction To JavaScript. Putting it Together (page 11) All javascript must go in-between the script tags. All javascript must go in-between the script.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.

1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Event Handling. Objectives Using event handlers Simulating events Using event-related methods.

Event Handling. Objectives Using event handlers Simulating events Using event-related methods.

Similar presentations

Ads by Google