I need a timer (coutdown), waiting 10 seconds for the download, JavaScript. After 10 seconds hide that text. For example:
10 seconds left ... There are 9 seconds left ... And so on and show a button ...
I do not want a text that says Wait 10 seconds, I want it to show how many seconds are left and hide that text to show the download button.
Thank you.
What you have to do is use the javascript setInterval function. This function does call every x milliseconds to the function that you pass by parameter. As you do not indicate anywhere if you use any library to manage the DOM. I've written you an example using only javascript.
/**
* Retorna el código HTML con los tags h1 y un numero en medio.
* @param number número a insertar
*/
function updateNumber(number) {
return "<h1>" + number + "</h1>";
}
/**
* Retorna el codigo HTML de un boton
*/
function createButton() {
return "<button>Final!</button>"
}
/**
* Contador que genera una cuenta hacia atrás.
* @param time tiempo en ms de espera de cada intervalo.
* @param n número de intervalos.
*/
function countdown(time,n) {
var id = setInterval(function(){
mainDiv = document.querySelector("#main");
main.innerHTML = updateNumber(n);
if(n == 0){
mainDiv = document.querySelector("#main");
main.innerHTML = createButton();
clearInterval(id);
}
n--;
},time);
}
countdown(1000, 5); <div id="main"><h1>COUNTDOWN!</h1></div>For the javascript code to be executed directly when loading the page, I have placed it at the end.
Dear friend, I support what our colleague fredyfx says, it would be good if you could see a tour of the portal so that you can issue your queries in more detail and thus be able to help you better. However, I found on the web a code that does what you want, I modified it to be like the description you mentioned about what you want it to do. It is not more than a script that runs every one second removing in this unit a number of seconds that you place and change the innerHTML of a paragraph
, so that it shows every second a time update. When it reaches zero, place another message, in that part you can execute the function you deem appropriate. I hope the code that I leave can help you. Greetings and that you find good knowledge.
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var segundos = 10;
// Actualiza los segundos cada un segundo
var x = setInterval(function() {
//Cambia el contenitdo del elemento con el id "demo"
document.getElementById("demo").innerHTML = "Quedan "+ segundos + " segundos ";
//Se resta una unidad cada vez que pasa por aqui.
segundos--;
//Cuando se acabe el contador va a ejecutar la función que le coloques dentro del if.
if (segundos < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "INICIANDO DESCARGA ...";
}
}, 1000);
</script>
</body>
</html>