Agregar un botón de tiempo habilitado para su sitio web

Es posible que haya visitado algunos sitios web que tienen ciertos controles en su lugar, como retrasar la habilitación de botones y enlaces en la página, o requerir que se envíe un código captcha antes de habilitar los componentes en la página.

Esto generalmente se hace para garantizar que las arañas web y los bots que acceden a su página, no invocar arbitrariamente los componentes de destino en la página. Otro ejemplo puede ser que desee presentar cierto contenido a su usuario, un anuncio o una presentación de video antes de habilitar contenido adicional.

En este tutorial, vamos a cubrir cómo construir un temporizador de cuenta regresiva que se puede usar para retrasar la activación de un botón en la página. Esta puede ser una forma efectiva de garantizar que su visitante sea un ser humano y también requiere que ocurra un retraso antes de entregar al visitante el contenido adicional. Este contenido adicional podría ser un video, un enlace de descarga o algún otro recurso en su sitio web.

el html

Comenzaremos con un ejemplo HTML simple. Todo lo que necesitamos para este ejemplo es un simple <button> elemento. En este ejemplo, deshabilitaremos el <button> elemento por defecto para que el visitante sea no puedo hacer clic el botón hasta que el temporizador haya llegado a ’00’ segundos. Una vez finalizado el cronómetro, el botón se activado. Habilitaremos el botón usando JavaScript.

<div id="wrapper">
    <div id="myTimer"></div>
    <button type="button" id="myBtn" class="btnDisable" disabled onclick="alert('Finally!')">
        Please wait...
    </button>
</div>

Hay algunas cosas que quizás desee tener en cuenta sobre este código HTML. El botón tiene un id atributo que usaremos para referencia en nuestro JavaScript, un atributo deshabilitado sin valor y un onclick event que solo estamos usando con fines de demostración. El onclick El evento no se activará hasta que se habilite el botón.

el css

Usamos CSS para diseñar nuestro temporizador, así como los otros componentes utilizados en esta demostración, como el div elementos que rodean el temporizador y el botón.

#wrapper {
    text-align:center;
    border:1px solid #7F7F7F;
    width:150px;
    margin:25px auto;
    padding:25px;
    background-color:#E3E4E4;
}

#myTimer {
    font:64px Tahoma bold;
    padding:20px;
    display:block;
}

button {
    width:125px;
    padding:10px;
}

.btnEnable {
    background-color:#E6F9D2;
    border:1px solid #97DE4C;
    color:#232323;
    cursor:pointer;
}

.btnDisable {
    background-color:#FCBABA;
    border:1px solid #DD3939;
    color:#232323;
    cursor:wait;
}

En nuestra muestra de CSS, usamos un clase diferente para el botón habilitado y deshabilitado.

JavaScript y jQuery

La mayor parte del código utilizado en este ejemplo es JavaScript puro. Sin embargo, hay un Pocas lineas de jQuery incluido. Así que asegúrese de hacer referencia a la biblioteca jQuery en su página.

var sec = 15;
var myTimer = document.getElementById('myTimer');
var myBtn = document.getElementById('myBtn');
window.onload = countDown;

function countDown() {
    if (sec < 10) {
        myTimer.innerHTML = "0" + sec;
    } else {
        myTimer.innerHTML = sec;
    }
    if (sec <= 0) {
        $("#myBtn").removeAttr("disabled");
        $("#myBtn").removeClass().addClass("btnEnable");
        $("#myTimer").fadeTo(2500, 0);
        myBtn.innerHTML = "Click Me!";
        return;
    }
    sec -= 1;
    window.setTimeout(countDown, 1000);
}

En este ejemplo, debe notar que la mayor parte del código está escrito en JavaScript puro. Sin embargo, hay tres líneas de código que aprovechan la biblioteca jQuery. El dos primeros Las declaraciones de jQuery se ocupan de la eliminación del atributo y la clase deshabilitados, y la habilitación de la btnEnable clase en el botón HTML.

El tercero crea un efecto animado y desvanece el temporizador durante 2500 milisegundos. No es necesario usar jQuery para este ejemplo, pero lo incluí solo porque jQuery realiza esos pasos en particular más fácil en comparación con el equivalente de JavaScript.

En este ejemplo, asignamos el sec variable a 15, que es el número de segundos que queremos que nuestro temporizador comenzar la cuenta regresiva en. Una vez que la cuenta regresiva llega a ’00’, el botón se habilita.

usamos el setTimeout método para crear un retraso de 1000 milisegundos o 1 segundo antes del countDown() la función se vuelve a ejecutar. Una vez el sec variable es igual a ‘0’, la función existe y es no más ejecutado.