setInterval window.setInterval (statement, interval); Schedules a "statement" to occur every interval milliseconds (1000 milliseconds = 1 second) Statement is often a call to a function (built-in or user-defined)
Do Now: clock.html <script type="text/javascript"> function displayTime () { var element = document.getElementById ("time"); element.innerHTML = Date(); return; } setInterval ('displayTime()', 100); </script> <body> The current time is: <span id="time"></span> </body>
cancelling a timer Timers are actually objects. Can hold the timer information in a variable: var t; // global variable for timer t =setInterval ('displayTime()', 50); </script> <button onclick="clearInterval (t)">Cancel</button>
Create a webpage named countdown.html with: a div element with an id = "countdown" A global variable timeLeft and 3 functions: startCountdown () { prompt user for number of seconds set the global variable timeLeft to that many seconds call setInterval to call countDown() every second countDown () { display the time remaining in the countdown div reduce timeLeft by 1 if timeLeft equals 0, alert "Boom" and cancel timer cancelCountdown () { alert "Cancelled" and cancel timer 2 buttons - one to start and once to cancel
Moving an object Create a div with id="ball" Use CSS to give the div a distinct background, a position: absolute, top: 50px, left: 0px, and a fixed height and width Create a global variable to keep track of the left position Use setInterval to periodically change the div element's left position (will make it move)
<div id="ball"></div> <script type="text/javascript"> var left = 0; function moveBall () { var e = document.getElementById ("ball"); e.style.left = left + "px"; left = left + 1; } setInterval ("moveBall()", 100); </script>
Additional tasks Give the "ball" an image use an <img> tag inside the bouncing div Make the ball "bounce" back and forth when left exceeds the right edge, start subtracting instead of adding to it Add a button to stop/start the ball Add a button to prompt the user for the speed