4 jQuery Timer examples which all developers should know

4 jQuery Timer examples which all developers should know

In this tutorial I will use jQuery Timer features to create few examples like Image Slider, time clock, stop watch and random background color changing effect. These examples are created with setInterval function of JavaScript.

As you know setInterval() executes a given code at every specified time interval.

Image Slider

image slider

An Image Slider is used to show different changing images on the website. These images are changed at every few seconds, and here I use setInterval() function which calls the change image function after every 2 seconds.

The images are shown using ul and li elements.

<ul id="slider">
    <li><img src="image1.jpg"/></li> 
    <li><img src="image2.jpg"/></li>
    <li><img src="image3.jpg"/></li>
</ul>

Initially I will hide, all except the first, img elements.

Then with setInterval() function I will show only the next image after every 2 seconds.

var x = 1;
setInterval(function () {
   $(slides).hide();
   $(slides).parents("#slider>li:nth-child(" + x + ")").find("img").show();
    if (x == slides.length)
        x = 1;
    else
        x++;
}, 2000);

The variable ‘x’ is increased every time inside the setInterval(). This is done to target the next image every 2 seconds.

If the value of ‘x’ reaches the number of img tags, then it is again set to 1.

This way jQuery Timer is made for image slider. In this example I have taken 3 image, you can increase the number of images by adding the li and img tags.

Time Clock

time clock

With jQuery Timer you can also make a Time Clock. This time clock displays the current time to the user.

Here I will use setInterval to call a function every 1 second.

This called function will fetch the current time from JavaScript’s toLocaleTimeString function.

<div id="timeClock"></div>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    $("#timeClock").html(t);
}

In the above code the timeClock div is the place where the current time is shown.

Automatic Background color changing effect

backgound color changing

We can apply jQuery Timer to change the background color of a div after every 1 second.

The below jQuery Timer code does this work:

<div id="bgDiv">My color changes automatically</div>

setInterval(function () {
    var bgColor = $("#bgDiv").css("background-color");
    if (bgColor == "rgb(255, 255, 0)")
        $("#bgDiv").css("background-color", "Orange")
    else
        $("#bgDiv").css("background-color", "Yellow")
}, 1000);

Here I am changing the background color of the div from Yellow to Orange and vice versa every 1 second.

Note: rgb(255, 255, 0) specifies yellow color.

Stop Watch

stop watch

Let’s create a Stop Watch with jQuery Timer. The stop watch will have 2 button one for starting the timer and other for reset.

The HTML:

<div id="stopWatch">0</div>
<button id="startButton">Start</button>
<button id="resetButton">Reset</button>

The jQuery Code:

var i = 1;
$("#startButton").click(function (e) {
    setInterval(function () {
        $("#stopWatch").html(i);
        i++;
    }, 1000);
});

$("#resetButton").click(function (e) {
    i = 0;
});

Conclusion
I hope you liked the different feature I have made with jQuery Timer, and you can use these features in your website freely. Just copy the codes and paste to your website.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on “WordPress, SEO, jQuery, HTML” and more.