How to display countdown timer for AJAX image refresh?

[bzcomputers]

I have this code to refresh an image on a page every 30 seconds, it is working well:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	setInterval(function() {
		$('.cameraimage').attr('src', $('.cameraimage').attr('src') + '?d=' + new Date().getTime());
	}, 30000);
});
</script>

I would now like to be able to display a countdown timer below the image to show the time till image refresh.

[kh99]

I'm not really a js expert, but this seems to work:

$(document).ready(function() {
    var countdown = 30;
	$('#countdown').html(countdown);
	setInterval(function() {
	    countdown--;
		$('#countdown').html(countdown);
		if (countdown <= 0)
		{
  		    $('.cameraimage').attr('src', $('.cameraimage').attr('src') + '?' + new Date().getTime());
			countdown = 30;
  		    $('#countdown').html(countdown);
        }
	}, 1000);
});

Then you need to insert something like:

<div>Image updates in: <span id="countdown"></span></div>

[bzcomputers]

Works great, thanks a lot!