Cuenta regresiva en boton

TrinityCore · #1 (**permalink**) 22/09/2015, 23:00

Hola gente, espero esten bien.

Queria saber como puede hacerse un sistema de cuenta regresiva en un boton..

Muchos ya saben a lo que me refiero, a las tipicas webs donde descargas algo y aveces el boton de descargar esta en "Descargar..10seg" algo asi.

Solo quiero que esta cuenta se active al pulsar el boton..

Me explico:

Hipoteticamente en mi web ofrezco a los usuarios 10 monedas gratis por dia, es decir, que ellos la primera vez pulsaran el boton de "Obtener Monedas" y se le implementaramn 10, bueno automaticamente se activara una cuenta regresiva de 24hs, pasada esas 24hs el boton podra ser pulsado nuevamente.

Espero puedan ayudarme ya que soy nuevo en esto de javascript, aun no logro memorizar todas sus funciones.

Gracias de antemano!

Tyvo · #2 (**permalink**) 23/09/2015, 02:44

Buenas

Si lo haces con Javascript lo puedes hacer con una cookie, guardas allí la fecha y al entrar compruebas la diferencia de tiempo con la fecha actual. Luego sobrescribes la cookie.

Pero tiene un problema, si borran o modifican las cookies, el sistema te fallará. La mejor manera es hacerlo en tu servidor con php, guardando en una base de datos el Usuario y la úlitma conexión.

Si lo que quieres es que te salga la cuenta atrás sería con un intervalo de 1s. Ir restando la cuenta atrás y actualizar la.

TrinityCore · #3 (**permalink**) 23/09/2015, 08:20

Y como capturo la fecha actual?

Tyvo · #4 (**permalink**) 23/09/2015, 17:02

Código HTML:

<html>
<head>
	<title>10 MONEDAS</title>
	<script type="text/javascript">

		var COOKIE_NAME = "fecha_conexion";

		function getCookie(cname) {
		    var name = cname + "=",
		    ca = document.cookie.split(';');
		    for (var i = 0; i < ca.length; i++) {
		        var c = ca[i];
		        while (c.charAt(0) == ' ') c = c.substring(1);
		        if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
		    }
		    return "";
		}

		function setCookie(cname, cvalue, exdays) {
		    var d = new Date();
		    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
		    var expires = "expires=" + d.toUTCString();
		    alert(expires);
		    document.cookie = cname + "=" + cvalue + "; " + expires;
		}

		function format(millis) {
			var hours = Math.floor(millis / 36e5),
	        mins = Math.floor((millis % 36e5) / 6e4),
	        secs = Math.floor((millis % 6e4) / 1000);
	        return hours+"h "+mins+"m "+secs+"s";
		}

		function comprobarFecha() {
		    var fecha_actual = new Date(),
		    fecha_ultima = Date.parse(getCookie(COOKIE_NAME)),
		    intervalo_min = 1000 * 60 * 60 * 24; // 24h = 1000ms * 60s * 60m * 24h

		    /* Si hay guardada una fecha, comprobamos si la duración es mayor a 24h */
		    if (fecha_ultima) {

		        var intervalo = fecha_actual - fecha_ultima; // Resultado en milisegundos
		        if (intervalo < intervalo_min) {
		            // Si el resultado es menor, no ha pasado las 24horas
		            alert("Lo siento :C,\nTe faltan " + format((intervalo_min-intervalo)) +" para volverlo a intentar");
		            return false;
		        }
		    }

		    setCookie(COOKIE_NAME, fecha_actual.toString(), 1);
		    alert("AQUI TIENES TUS 10 MONEDAS! \nEs tu dinero, no lo despilfarres."); // Ha pasado las 24 horas o es la primera vez que se entra
		    return true;
		}

	</script>
</head>
<body>
	<center style="margin-top:100px;">
		<h3> Tienes derecho a 10 monedas diarias </h3>
		<input type="button" value="Dame la pasta!" onclick="javascript:comprobarFecha();">

		<p>
			Si borras o modificas la cookie, volver&aacute;s a tener las monedas. Por lo que no es un m&eacute;todo seguro.<br/>
			Cada navegador podr&aacute; tener 1 cookie por lo que no es muy efectivo.
		</p>
		<p>
			Por cierto: un error, provoca que en algunos navegadores las cookies no se guarden, cuando lo ejecutamos desde local.
		</p>
	</center>
</body>
</html>