CODEWITHSUNDEEP
javascriptjqueryhtmlimage
Sebastian Opperman
Sebastian Opperman

Reputation: 241

Javascript Timer with different images

I have a JS timer script that counts down from 20 seconds

var count = 0;
var speed = 1000;

countdown = setInterval(

        function(){

        jQuery("#countdown").html(count);

        if (count == 0) {
            return;
        }
        count--;
        }

,speed);

Is there a way to dynamically change the src of an image when the timer gets to a certain point? Eg:

if (count >= 0 && count <= 10) {
 img.src = "2.png"
}

if (count >= 11 && count <= 20) {
 img.src = "1.png"
}

When the user clicks a button it adds 5 to the count on the timer:

jQuery('#add').click(function() {
    if(count >= 0 && count <= 18)   {count = count + 6}

So when the value goes above 11 again the image src should revert back to 1.png

Basically its a script that changes a image's src according to the value of timer.

Thanks

Upvotes: 0

Views: 1363

Answers (5)

sg3s
sg3s

Reputation: 9567

In pure javascript you would do it somewhat like this:

http://jsfiddle.net/sg3s/e54L3/

HTML:

<button>Buttan</button>
<div id="counter"></div>

Javascript:

"use strict";
(function(document) {
    var counter = document.getElementById('counter'), 
        button = document.getElementsByTagName('button')[0],
        // Added one extra to count to compensate for the one immediate countdown...
        count = 6, speed = 1000, countAddStep = 5, timeout,
        func = function () {
            count--;
            counter.innerHTML = count;
            if(count !== 0) {
                timeout = setTimeout(func, speed);
            }
        };

    button.addEventListener('click', function() {
        // Add the countstep to count
        count = count+countAddStep;
        counter.innerHTML = count;
        // Restart the timeout if needed.
        if (count === countAddStep) {
            // Add one for the one immediate countdown
            count++;
            func();
        }
    });

    // Start the timeout with 1 second (1000 ms) intervals
    func();
} (document));

This would be a proper way to do it if you're just starting to learn javascript. If you need to implement something for an existing application/website you're likely to have a library like jQuery at your disposal, which would simplify things a bit and make it more cross browser compatible.

I'm sure people will post jQuery examples as well... Actually here is the jQuery version. Knowing proper js is more important.

You can make the timer an image, I didn't have images so I kept it to html.

Upvotes: 2

cosmin.danisor
cosmin.danisor

Reputation: 963

You can make a function that you call at the end of each interval and also on click after incrementing the count. Something like this:

function validateImg(){
    var $img = $('#imgID');
    if (count >= 0 && count <= 10 && $img.attr('src') !='2.png') {
        $img.attr('src','2.png');
    }

    if (count >= 11 && count <= 20 && $img.attr('src') !='1.png') {
        $img.attr('src','1.png');
    }
}

This way you will only change the img if the count is in the correct interval

Upvotes: 0

Smileek
Smileek

Reputation: 2782

You can change every attribute with jQuery like this:

var count = 0;
var speed = 1000;

countdown = setInterval(function(){
        if (count == 0) {
            return;
        }
        count--;
        $("#countdown").prop("src", count + ".png");
}
,speed);

But probably you'd prefer to have one big image with sprites and change background-position style instead of src to avoid delays when new image is loading.

Upvotes: 0

Vimal Raj
Vimal Raj

Reputation: 1038

If you want to use plain javascript, you can give the image an id and then access the image using

document.getElementById("imageid").src="newimage.png";

and update it to the desired image.

Upvotes: 0

dreamweiver
dreamweiver

Reputation: 6002

Changing the src of a image is easy with Jquery.

var newSrc=".....  " ; // new img path
$('#img1').attr('src',newSrc ); //changing the image

EDIT:

jQuery('#add').click(function() {

if(count >= 0 && count <= 18)   
{
   if(count==11)
  {
     var newSrc=".....  " ; // new img path
     $('#img1').attr('src',newSrc ); //changing the image 
  }

  count = count + 6
}

Happy coding :)

Upvotes: 0

Related Questions