Lesson 35: Creating Animation

In order to create animation using javascript, we need to use a kind of timer so that an object changes according to a certain time interval. In Javascript, we use the setInterval() method as a timer.

The setInterval() Method

The setInterval() method calls a function or runs an expression at specified intervals (in milliseconds). The syntax is as follows:

setInterval(myfunction, time interval)

The setInterval method runs a function created by you at a certain time interval in milliseconds.  For example,  a time interval of 1000 equals to 1 second. To execute a function only once, after a specified number of milliseconds, we use the setTimeout() method.

Example 35.1

<script>
function myFunction() {
setInterval(function(){ alert("Welcome to JavaScript Tutorial"); }, 3000);
}
</script>);

Running this script produces a popup dialog that displays the message "Welcome to JavaScript Tutorial" every two seconds.

Load Message Stop

Example 35.2

You can also refer to a  function; Alert "Hello" every 3 seconds (3000 milliseconds):

var myVar;

function myFunction() {
myVar = setInterval(alertFunc, 3000);
}

function alertFunc() {
alert("Hello!");
}

Load Message

Example 35.3

Display the current time (the setInterval() method will execute the function once every 1 second, just like a digital watch):

<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>

Current time:

 

The clearInterval Method

The clearInterval() method clears a timer set with the setInterval() method.

The ID value returned by setInterval() is used as the parameter for the clearInterval() method.

The syntax is

clearInterval(id_of_setinterval)

Example 35.4

To run and stop and popup dialog

<button onclick="myFunction()">Run it</button><br>
<button onclick="myFunction2()">Stop it</button>

<script>
var myVar;

function myFunction() {
myVar = setInterval(alertFunc, 2000);
}
function myFunction2() {
clearInterval(myVar);
}

function alertFunc() {
alert("Hello!");
}
</script>

Example 5

In this example, the setInterval() method executes the setColor() function once every 300 milliseconds, which will toggle between two background colors. The stopColor function will stop the animation using the clearInterval method.

<button onclick="stopColor()">Stop Toggling</button>

<script>
var myVar = setInterval(function(){ setColor() }, 300);

function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
clearInterval(myVar);
}
</script>

Example 35.6

This script create a clock. It is stopped by using the clearInterval method

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="myStopFunction()">Stop time</button>

<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
clearInterval(myVar);
}
</script>

Stop time