Contador de tempo regressivo (cronômetro) em Javascript/JQuery

Procurei pela internet um contador regressivo (estilo cronômetro) para mostrar o tempo em uma sessão de login. Achei alguns modelos, mas muito extensos. Até que encontrei um parecido com o que eu queria e resolvi adaptá-lo.

O contador mostra a contagem regressiva em uma tag html (span, div, etc).

Não se esqueça de incluir o JQuery

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

O código está todo comentado!

<script type="text/javascript">

var tempo = new Number();
// Tempo em segundos
tempo = 300;

function startCountdown(){

	// Se o tempo não for zerado
	if((tempo - 1) >= 0){

		// Pega a parte inteira dos minutos
		var min = parseInt(tempo/60);
		// Calcula os segundos restantes
		var seg = tempo%60;

		// Formata o número menor que dez, ex: 08, 07, ...
		if(min < 10){
			min = "0"+min;
			min = min.substr(0, 2);
		}
		if(seg <=9){
			seg = "0"+seg;
		}

		// Cria a variável para formatar no estilo hora/cronômetro
		horaImprimivel = '00:' + min + ':' + seg;
		//JQuery pra setar o valor
		$("#sessao").html(horaImprimivel);

		// Define que a função será executada novamente em 1000ms = 1 segundo
		setTimeout('startCountdown()',1000);

		// diminui o tempo
		tempo--;

	// Quando o contador chegar a zero faz esta ação
	} else {
		window.open('../controllers/logout.php', '_self');
	}

}

// Chama a função ao carregar a tela
startCountdown();

</script>

 

 

Acessar um elemento da página principal estando dentro do iframe

Você possui a página principal (principal.html) e dentro possui um iframe (iframe.html).

Para pegar um elemento da página principal de dentro do iframe (iframe.html) usamos o seguinte código em javascript:

// Para pegar o valor de um elemento, ex: div, p, h1, entre outros
parent.document.getElementById('elemento').innerHTML;
// Para definir
parent.document.getElementById('elemento').innerHTML = 'Texto aqui =)';
// Para utilizar em formulário (input) troque o 'innerHTML' por 'value'