Javascript Timer with different images

Question

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

sg3s · Accepted Answer · 2013-04-23 08:54:11Z

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.

dreamweiver · Accepted Answer · 2013-04-23 07:58:57Z

0

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 :)

answered Apr 23, 2013 at 7:58

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Comments

Vimal Raj · Accepted Answer · 2013-04-23 08:02:38Z

0

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.

answered Apr 23, 2013 at 8:02

Vimal Raj

1,04813 silver badges23 bronze badges

Comments

Smileek · Accepted Answer · 2013-04-23 08:05:49Z

0

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.

answered Apr 23, 2013 at 8:05

Smileek

2,9421 gold badge26 silver badges27 bronze badges

Comments

cosmin.danisor · Accepted Answer · 2013-04-23 08:14:44Z

0

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

edited Apr 23, 2013 at 8:14

answered Apr 23, 2013 at 8:07

cosmin.danisor

9631 gold badge13 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript Timer with different images

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related