Current course:
http://digitalarts.bgsu.edu/interactive/code.php?c=js_time_timing

Javascript time & timing


What can you do with Javascript and time/timing?

Intervals: Timers that continue to run at a set "interval" until stopped manually.

Timeouts: Timers that run once and stop - like a kitchen timer.
Examples:

Step Through the PNGs


Click the image to go to start the animation. Roll out of the image to stop the animation.

<head>
      <script type="text/javascript">
            var myImages = new Array("images/img1.png", "images/img2.png",
                        "images/img3.png", "images/img4.png",
                        "images/img5.png", "images/img6.png",
                        "images/img7.png", "images/img8.png");
            var myInterval = "";
            var currentImg = 0;
            function animate() {
                  clearInterval(myInterval);
                  setInterval('nextImage()', 100);
            }
            function nextImage() {
                  currentImg++;
                  if (currentImg == myImages.length) {
                        currentImg = 0;
                  }
                  document.getElementById('myPNG').src = myImages[currentImg];
            }
      </script>
</head>
<body>
      <img id="myPNG" src="../images/img1.png" onclick="animate();">
</body>