Fazendo um contador regressivo com AJAX e PHP
14 Dec 2012Com o fim do mundo próximo, vou mostrar a vocês neste post como fazer um contador regressivo utilizando PHP e AJAX. Para que o contador fique dinâmico, vamos usar a biblioteca jQuery para fazer a requisição AJAX.
Vamos aos códigos:
index.html
<!doctype html>
<html>
<head>
<title>Contador em PHP</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){// Requisicao AJAX
var requisicao = function(){
$.ajax({
url: “contador.php”
}).done(function(resultado){
// Exibe o resultado no elemento com ID contador
$(“#contador”).html(resultado);
});
};// Executa a requisicao com intervalo de 100ms
setInterval(requisicao, 100);});
</script>
</head>
<body>
<p>Faltam <span id=”contador”></span> segundos para o fim do mundo!</p>
</body>
</html>
No código acima apenas fizemos uma requisição AJAX para a página contador.php, que contém o resultado do nosso contador.
contador.php
<?php
// Define as datas
$data_atual = date(‘d-m-Y h:i:s’);
$data_final = date(‘2012-12-21’);// Converte as datas para a hora UNIX e realiza o calculo da diferenca
$diferenca = strtotime($data_final) – strtotime($data_atual);// Exibe o resultado se ele for positivo. Caso seja negativo, exibe 0.
echo ($diferenca >= 0) ? $diferenca : 0;?>
No código acima, convertemos as duas datas para a hora UNIX, realizamos o cálculo da diferença entre elas e por fim exibimos o resultado.
Você pode baixar os códigos deste post AQUI.
Até a próxima 😉