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!