Crea una cuenta regresiva con JavaScript puro (sin frameworks)

Поделиться
HTML-код
  • Опубликовано: 23 янв 2025

Комментарии • 123

  • @EDteam
    @EDteam  7 лет назад +24

    ¿Quieres mejorar o personalizar más este ejercicio? Aqui tienes el codepen codepen.io/AlvaroFelipe/pen/EvJrOW
    No olvides suscribirte y compartir el video si te gustó.

    • @danieluribegarcia2463
      @danieluribegarcia2463 7 лет назад +3

      Oye y solo quiero sea puro tiempo no meses ni nada? Solo puro horario como cronómetro

    • @luisgonzalez-fr1ee
      @luisgonzalez-fr1ee 5 лет назад

      Genial! gracias!!

    • @manuelramirez87
      @manuelramirez87 5 лет назад

      Hola, hay forma de modificar este script que no sea cuenta regresiva si no progresiva, es decir para ir aumentando días desde una fecha determinada pasada.?

    • @peteraspiazu3324
      @peteraspiazu3324 4 года назад

      @@danieluribegarcia2463 busco lo mismo

  • @emanueltejadacoste2250
    @emanueltejadacoste2250 4 года назад +31

    "Feliz 2020" pero nadie sabia lo que venia en el 2020 , Excelente video !

  • @pymecontabledominicana4324
    @pymecontabledominicana4324 4 года назад +4

    Excelente, eres un experto, si hubiese sabido que me gustaba tanto la programación no hago la carrera de contabilidad y me dedico a esto.

  • @manuelpumahuacre657
    @manuelpumahuacre657 5 лет назад +1

    hola, que bueno ver contenido sin usar ningun tipo de framework o libreria, soy fanatico del javascript puro, este video va influenciar a muchas personas para que comiencen a ver que no se necesita un framework para poder hacer algun sistema, sigan asi saludos.

  • @liorocker1
    @liorocker1 7 лет назад +7

    Excelente ejemplo, por cierto muy util el tip con slice (-2), yo también usaba el típico if para concatenar el 0 :B

  • @marloncode
    @marloncode 2 года назад

    Pero que hermos enseñas amigo!! mis saludos cordiales!! si o si llevo un curso.. saludos cordiales desde Perú!

  • @manudeteruel
    @manudeteruel 7 лет назад +1

    Fantástica idea. Muchas gracias por la claridad de la explicación. Saludos desde Teruel(España)

  • @426GILBERTO
    @426GILBERTO 7 лет назад

    Yo soy un aficionado a la programación me gustò mucho y aprendì mucho con el CODEPEN, no tengo dinero para pagar cursos, pero, te he aprendido mucho gracias amigo saludos desde Colombia

  • @jyg0618
    @jyg0618 5 лет назад

    Muchas gracias por compartir tus conocimientos con novatos como yo de manera tan amigable y super simple... MUCHAS GRACIAS!!

  • @brayanhincapietr1543
    @brayanhincapietr1543 5 лет назад

    Excelente tutorial, no manejo mucho el código pero pude entender a la perfección muy bien explicado todo y funcionando 100% muchas gracias!

  • @pabloguerrabedoya1678
    @pabloguerrabedoya1678 2 года назад

    Excelente video, fantástico, me ayudó mucho para hacer mi temporizador en React. Muchas gracias

  • @juanjarazarria6003
    @juanjarazarria6003 4 года назад

    Estimado, como a muchos, me salvaste la vida :) agradecido mil veces de haberme topado con este video :D

  • @M4DL
    @M4DL 7 лет назад +8

    genial, es muy útil, me encanto el truco de slice, gracias!!

  • @rodrigobratos8593
    @rodrigobratos8593 5 лет назад +1

    sos un crack, me salvate el semestre

  • @naqzher
    @naqzher 7 лет назад

    muy bueno cuando suben estos videos, se aprende mucho !

  • @gustavot2504
    @gustavot2504 7 лет назад +3

    buen video de JS que ahora se utiliza para todo, hasta para hacer el almuerzo :D

  • @gustamx-2024
    @gustamx-2024 2 года назад

    Muchísimas gracias Alvaro!

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 4 года назад

    Excelente EJ!!!! Muchas Gracias!!!

  • @sergio.sabater
    @sergio.sabater 6 лет назад

    Muchas gracias por su magistral clase

  • @SonGoku-pc7jl
    @SonGoku-pc7jl 2 года назад

    muy chulo el video, buen truco lo del slice y todo en general :)

  • @joserphandjaba
    @joserphandjaba 4 года назад

    Muchas gracias. Me ayudo bastante para entender la lógica.

  • @ara.g8239
    @ara.g8239 3 года назад

    excelente! muchas gracias por el aporte, me fue muy util

  • @moycs777
    @moycs777 7 лет назад

    Muchas gracias por el aporte super calidad la manera de enseñanza

  • @angelopolis938
    @angelopolis938 4 года назад +2

    Tomando como base la fecha en que estoy ahorita mismo, ya solo le quedarían 10 días para terminar al primer contador que ejecutó. Quién iba a decir que este 2020 no tiene mucho de feliz jajajajajaja 😅

  • @franzlearn3990
    @franzlearn3990 3 года назад

    Ufff buenisimo gracias Alvaro

  • @davidticstorm4114
    @davidticstorm4114 7 лет назад +1

    Estuvo muy bueno el video e interesante de como poder realizar un contador con JS... y utilizar un slice(-2) woao respecto ese truco jejeje

  • @sergiogman
    @sergiogman 5 лет назад

    muy claro y me ha servido. muchas gracias

  • @espressivovenezuela7247
    @espressivovenezuela7247 4 года назад

    Eres un monstruo hermano....

  • @rodovilar8041
    @rodovilar8041 2 года назад +1

    Excelente video. No entendí la línea de 'remainSeconds' que le has asignado y porque se usa el residuo 60. Que es lo que se divide ahí? Entiendo que se obtienen todos los segundos restantes a la fecha limite con la variable anterior 'remainTime', pero que se obtiene finalmente con ese residuo de 60 solo en esa linea? Saludos!

  • @oliviaayanami6764
    @oliviaayanami6764 6 лет назад

    Muy buen vídeo! me gusta como explica las cosas

  • @oscaredelarosa35
    @oscaredelarosa35 5 лет назад

    Excelente clase

  • @allanfernandomejianolasco8982
    @allanfernandomejianolasco8982 7 лет назад

    Genial, gracias por tus aportes

  • @CopyTopCerebritops
    @CopyTopCerebritops 4 года назад

    HOY ES 2020 Saludos crack.

  • @espinosarmando
    @espinosarmando 4 года назад

    Excelente amigo me ayudo un monton, buen tutorial

  • @chaviz
    @chaviz 5 лет назад

    Gracias, aprendí mucho con este vídeo.

  • @CarlosHernandez-rb3qy
    @CarlosHernandez-rb3qy 7 лет назад +1

    Muchas gracias, que genial explicas! un saludo :)

  • @blazart1715
    @blazart1715 2 года назад

    Me podrían explicar lo del modulo (%) se como funciona pero no se que función emplea en los remainTime

  • @guillermoforero2806
    @guillermoforero2806 7 лет назад

    Que buen video... me sirvio bastante.. muchas gracias

  • @robertogutierrez5244
    @robertogutierrez5244 4 года назад

    Como hago para que en ves de restar me sume desde una fecha especifica, es decir que desde hoy vaya contando cuantos dias van pasando

  • @godio26
    @godio26 Год назад +1

    por qué no se me visualiza en safari

  • @falcao1750
    @falcao1750 3 года назад +1

    Profe buenos días, q buen video, me gustaría saber si aplico ese código en una evaluación me funcionaria? será que al terminar el tiempo la evaluación calificara lo que solo se selecciono en los input.

  • @edgarg.4610
    @edgarg.4610 4 года назад

    Si lo modifico al ingresar un dato que solo debe durar una hora ¿ como podría codificarlo o armarlo?

  • @edgarhernandez1200
    @edgarhernandez1200 6 лет назад

    Gracias
    Mil gracias lo explicaste muy bien

  • @fremeto
    @fremeto 5 лет назад

    Como seria para obtener la fecha de manera dinámica sumando x numero de minutos a la fecha actual?

  • @erwincid5531
    @erwincid5531 5 лет назад

    ¡Gracias! me fue muy util

  • @ericktito6494
    @ericktito6494 4 года назад

    que excelente clase... cuando lo encuentra en una amanecida xD

  • @Mr.SamFlores
    @Mr.SamFlores Год назад

    Muchas gracias 😁😁.

  • @afterefects
    @afterefects 4 года назад

    Hola amigo. ¿cómo se podría hacer un juego de "control de acceso" para teclear una "contraseña" que previamente se pueda introducir, para que sea validada y que si es correcta aparezca un msg de acceso o de lo contrario uno de error?, como simple cuestión lúdica para juegos de escape?. Gracias.

  • @eduardflores8420
    @eduardflores8420 2 года назад

    Alvaró es muy bueno en el desarrollo web, lástima que el actualmete ya no dicte cursos

  • @alesim0
    @alesim0 4 года назад +2

    17:14 Like si faltaba menos de 1 mes para la fecha del ejercicio XD

  • @yasinsama904
    @yasinsama904 4 года назад +1

    Alguien me puede ayudar por favor???? Como hago para darle estilos a Día, hora minutos y segundos por separado?? Quería hacer un recuadro para cada número, Ya q en el html solo hay un div, como tendría que hacer? Soy seguidor de sus videos de hace muchoooo pero este me dejo consternado en esa parte je.

  •  5 лет назад +1

    Excelente video. Con esto se puede proteger un enlace que aparezca luego de terminar una cuenta regresiva de por ejemplo 45 segundos?

  • @rodrigojorquerareyes949
    @rodrigojorquerareyes949 4 года назад

    Hola...excelente el vídeo y mejor la explicación, pero tengo una duda con respecto al paso de los parámetros de tu cuanta regresiva...ya que tu pones el valor en duro en la función "countdown("Sun May 17 2022 23:16:35 GMT-0400","clock","Muchas Gracias");", pero mi duda es que si le quiero pasar por ejemplo 50 minutos o 120 minutos o lo que sea pero en minutos...y haga igual el calculo...te pregunto esto ya que no soy experto y necesito saber como hacerlo...por tu ayuda muchas gracias.

  • @tomasbuitrago466
    @tomasbuitrago466 7 лет назад

    hey gracias estuvo genial el ejercicio ;)

  • @gambitogame8948
    @gambitogame8948 4 года назад +1

    justo necesitaba hacer un temporizador pero me hizo gracia que el timer acabe el 20 de Sep de 2020.... coincidencia, NO LO CREO jejejeje

    • @i_lq
      @i_lq 4 года назад

      :0

  • @javierdelarosa6563
    @javierdelarosa6563 4 года назад

    Muy buen video. Una consulta. Si quisiera hacer un temporizador x minutos por ejemplo, ¿ como paso el valor de esos x minutos en mi html y los recojo en .js ?

  • @karenspalter1839
    @karenspalter1839 2 года назад

    AYUDAAAA: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at updateTimer

    • @fernandoestrada6795
      @fernandoestrada6795 11 месяцев назад

      yo tambien tengo el mismo error, lograste que te corriera?

  • @padrocha
    @padrocha 6 лет назад

    ¿Y sí quisiera también poner meses y años?

  • @Santiago-tb5dw
    @Santiago-tb5dw 2 года назад

    Hermano me gusto el video, solo tengo un problema, quiero yo asignar el tiempo de forma dinámica pero no se como hacer :(

  • @Rogelioestrada1
    @Rogelioestrada1 6 лет назад

    Hola qué tal?
    Tengo un problema a la hora de ejecutar el contador
    Uso notepad++ y al darle ejecutar en Chrome me imprime solo el texto del HTML, hice todo tal y como en el vídeo
    Ayuda por favor

  • @juanestebangonzalez4613
    @juanestebangonzalez4613 5 лет назад

    Gracias bro, llevaba 2 dias sin dormir porqur no podia ejecutar mi codigo

  • @hadercollazos7810
    @hadercollazos7810 5 лет назад +1

    quiero que ese codepen funcione en facebook con la foto de el evento me puedes guiar en esa parte Gracias aprendi mucho

  • @paquibravo8541
    @paquibravo8541 7 лет назад

    Genial, gracias.

  • @yosmargarces818
    @yosmargarces818 5 лет назад

    Excelente Gracias

  • @GianmarcoCV
    @GianmarcoCV 7 лет назад +3

    Que sensual trucazo del slice.

  • @zzzed7709
    @zzzed7709 5 лет назад

    Muy bueno 👌

  • @movilife2458
    @movilife2458 5 лет назад

    Gracias mi amigo

  • @tetico
    @tetico 7 лет назад

    POR FAVOR AYUDA!
    Nunca he programado pero tengo que resolver esto: Mi evento es para el 8 de Diciembre de 2018. Ya estoy usando una plantilla HTML la cual incluyo, y tengo este código java. Me podrían indicar cómo corregirlo y hacerlo funcionar? MIL GRACIAS DE ANTEMANO!!!
    HTML




    2018 año de la BMW Expoclásica de Guatemala
    Contador regresivo para el inicio del evento. Será programado en 01 de Enero de 2018 y marca la fecha y hora de la Expoclásica 2018.





    00
    Days

    00
    Hours

    00
    Mins

    00
    Secs



    IR A LA PÁGINA PRINCIPAL
    __________________________________________________________________________
    JAVA
    (function($) {
    $.fn.countdown = function(options, callback) {
    //custom 'this' selector
    thisEl = $(this);
    //array of custom settings
    var settings = {
    'date': null,
    'format': null
    };
    //append the settings array to options
    if(options) {
    $.extend(settings, options);
    }
    //main countdown function
    function countdown_proc() {
    eventDate = Date.parse(settings['Dec 08 2018 10:30:00 GMT-0500']) / 1000;
    currentDate = Math.floor($.now() / 1000);
    if(eventDate = 2) ? days : "0" + days;
    hours = (String(hours).length >= 2) ? hours : "0" + hours;
    minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
    seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
    }
    //update the countdown's html values.
    if(!isNaN(eventDate)) {
    thisEl.find(".days").text(days);
    thisEl.find(".hours").text(hours);
    thisEl.find(".minutes").text(minutes);
    thisEl.find(".seconds").text(seconds);
    } else {
    alert("Dec 08 2018 10:30:00 GMT-0500");
    clearInterval(interval);
    }
    }
    //run the function
    countdown_proc('Dec 08 2018 10:30:00 GMT-0500');
    //loop the function
    interval = setInterval(countdown_proc, 1000);
    }
    }) (jQuery);

    • @EDteam
      @EDteam  7 лет назад

      +Héctor Cardona la ayuda que necesitas esta en este video. Sigue las instrucciones y lo lograrás.

    • @tetico
      @tetico 7 лет назад

      Bueno intentaré, la verdad veo distinto el script, pero siempre gracias.

  • @compufriendsoem
    @compufriendsoem 6 лет назад

    hola y un contador de visitas como lo harías funcional

  • @wilsonguiovannimunozdaza6599
    @wilsonguiovannimunozdaza6599 5 лет назад

    Excelente video, todo me funcionó como esperaba, quisiera saber si se podría usar este código en una ventana modal

  • @jinstarchancafemejia7224
    @jinstarchancafemejia7224 6 лет назад

    Admiro tu trabajo, eres muy bueno haciendolo me encantaria que me ayudes con un proyecto, no cuento con muchos recursos pero me encantaria que me ayudes con una programación, quisiera contactarme con usted y poder conversar. Gracias y excelente video.

  • @chancal8275
    @chancal8275 6 лет назад

    cómo consigo el código HTML para ponerlo en un blogger?

  • @gabrielrosales89
    @gabrielrosales89 3 года назад

    Si es que alguno ve este comentario, alguno sabe como modificar el codigo para que al refrescar la pagina me continue la cuenta regresiva? y no se me vuelva el timer al inicio?

  • @emanuelbast
    @emanuelbast 6 лет назад

    Muchas gracias

  • @danyesc7620
    @danyesc7620 5 лет назад

    thanks, dude.!.. very useful video.

  • @netpala
    @netpala 6 лет назад +4

    La verdad: 2 palabras "Im presionante" XD gracias

    • @eld3nn1mxd22
      @eld3nn1mxd22 4 года назад

      enrealidad fue una palabra echa en dos XDXDX

  • @brandonjosuemontes4307
    @brandonjosuemontes4307 6 лет назад

    Genial!

  • @evansalcantara6121
    @evansalcantara6121 4 года назад

    Lo hice exactamente igual, y no me funcionó, pero muy chulo el video

  • @rubendarioisla
    @rubendarioisla 5 лет назад

    buenisimo y como se hace si se requiere meseS?

  • @cristoferraymundo9323
    @cristoferraymundo9323 7 лет назад

    Hola que tal, una pregunta, el contador funciona para todos los navegadores(Firefox, Chrome, Internet Explore y Safari)

    • @rtcwkillz
      @rtcwkillz 6 лет назад

      Es javascript todos los navegadores soportan javascript

  • @elguerogz
    @elguerogz 5 лет назад

    Buenas tardes, de ante mano, muchas gracias, funciona bien...
    Ahora, lo quiero hacer dinámico con php en donde tengo fechas y horas diferentes...
    Traté de hacer algo asi:
    Hago un ciclo para recorrer la tabla donde tengo las alarmas
    $hora_sonar_alarma=$row["hora_sonar_alarma"];
    $id_clock = "clock_".$id_alarmas;






    countdown('', '', '¡Ya empezó!');

  • @carlosadolfoamarante7801
    @carlosadolfoamarante7801 5 лет назад

    Gracias por el aporte! Me fue de mucha utilidad, igual me quedo una duda que tengo hace mucho tiempo y creo que me podes ayudar. ¿CUAL ES EL NOMBRE DE LA CANCIÓN INSTRUMENTAL DEL INICIO (TIPO JAZZ/BLUES)? La estoy buscando hace mil años y nunca la pude encontrar porque no le se el nombre XD
    Saludos desde argentina!

  • @ivanmedina8228
    @ivanmedina8228 6 лет назад

    hola quisiera saber si puedo copiar el codigo de tu video

  • @iscjoseurielguerratrinidad25
    @iscjoseurielguerratrinidad25 2 года назад

    excelente

  • @cleanview8324
    @cleanview8324 4 года назад

    but my script shows this line ${t,remainDays}d:${t,remainHours}h:${t,remainMinutes}m:${t,remainSeconds}s instead of 0d:00h:00m:5s

    • @lorenzosandoval272
      @lorenzosandoval272 4 года назад

      I had the same problem, until trying and testing, I discovered that i should use these quotes (``) instead of the normal single quotes ('').
      That solved the problem.

  • @christianandrade06
    @christianandrade06 6 лет назад

    Podrias implementar cursos de Solidity.

  • @NFTGamesAndTrades
    @NFTGamesAndTrades 7 лет назад +2

    Extraño el sonido del teclado. :/

  • @diego.coder26
    @diego.coder26 7 лет назад

    ED team ,tienen pensado en un futuro implementar el lenguaje de programación Python ? esta muy demandado hoy en día y es multipropósito saludos

  • @jhonPabon245
    @jhonPabon245 3 года назад

    Bueno, me funciono para el trabajo xd

  • @crissanchez1251
    @crissanchez1251 7 лет назад

    muy buena

  • @huberelcrack
    @huberelcrack 3 года назад

    🤩🤩🤩🤩🤩🤩🤩🤩🤩🥳🥳🤝

  • @raycoustum
    @raycoustum 5 лет назад

    Muy buen video como de costumbre, es solo que al parecer no me sirve de momento

  • @juanluisquijanosalazar4777
    @juanluisquijanosalazar4777 3 года назад +1

    subelo a git

  • @paolobooker4163
    @paolobooker4163 4 года назад +1

    A alguien mas les pasa que este metodo le consume demasiados recursos?

  • @Fogell_
    @Fogell_ 5 лет назад

    La cuenta no debería de incrementar en ves de decrementar mmmm...

    • @EDteam
      @EDteam  5 лет назад

      Es una cuenta regresiva como dice en el título 😁

  • @luisfrontendvue01
    @luisfrontendvue01 4 года назад

    2020 omg!

  • @ivanmedina8228
    @ivanmedina8228 6 лет назад

    tambien me podras proporcionar un numero telefonico de contacto

  • @mauriciomenacousin4744
    @mauriciomenacousin4744 5 лет назад

    new Date(); para que funcioné la D es en mayúscula

  • @paisajesmashermososdelmund9108
    @paisajesmashermososdelmund9108 5 лет назад

    Hola quisiera contactarme contigo por email puedes enviarmelo porfa para hacerle algunas consultas