Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pepote21 en 21 de Junio 2017, 19:15

Título: Javascript cronómetro de cuenta atrás Funciones Timers setInterval CU01164E
Publicado por: Pepote21 en 21 de Junio 2017, 19:15
Hola a todos. Aquí dejo mis códigos para los ejercicios de la entrega CU01164E del tutorial de desarrollo web con JavaScript usando Notepad++ como editor. No sé exactamente si es lo que se pide según el lugar donde deban incluirse las funciones timers.

Gracias. Un saludo.

Ejercicio 1:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
           
        </style>
        <script type="text/javascript">   
            function reloj(){
    var hoy=new Date();
var h=hoy.getHours();
var m=hoy.getMinutes();
var s=hoy.getSeconds();
m = actualizarHora(m);   
s = actualizarHora(s);
                document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
}
function actualizarHora(i) {
                if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
                return i;
            }
window.onload=function(){
    setInterval(reloj,1000);
}
        </script>
    </head>
    <body>
    <script type="text/javascript">   
           
        </script>
<div style="text-align:center;">
   
            <div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" ></div>
</div>
    </body>
</html>


Ejercicio 2:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
           
        </style>
        <script type="text/javascript">   
            window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
            var globalID;
function reloj(){
    var hoy=new Date();
var h=hoy.getHours();
var m=hoy.getMinutes();
var s=hoy.getSeconds();
m = actualizarHora(m);   
s = actualizarHora(s);
                document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
globalID=requestAnimationFrame(reloj);
}
function actualizarHora(i) {
                if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
                return i;
            }
            window.onload=function(){
    globalID=requestAnimationFrame(reloj);
            }
        </script>
    </head>
    <body>
    <script type="text/javascript">   
           
        </script>
<div style="text-align:center;">
   
            <div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > </div>
</div>
    </body>
</html>


Ejercicio 3:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
           
        </style>
        <script type="text/javascript">   
            var crono;
var i=60;   
            function cronometro(){
    nodoDiv=document.getElementById('displayReloj');
    nodoDiv.innerHTML='00:'+i;
i--;
i=actualizarHora(i);
                nodoDiv.innerHTML='00:'+i;
                if(i==0){
                    finish();
                }
}
function actualizarHora(i) {
                if (i<10) {
    i = "0" + i;
}
                return i;
            }
function start(){ 
    crono=setInterval(cronometro,1000);
    //crono=setInterval(function(){cronometro},1000);
}
function finish(){
    alert('Tu tiempo ha terminado');
clearInterval(crono);
i=60;
reset();
}
function reset(){
    document.getElementById('displayReloj').innerHTML='01:00';
}
window.onload=function(){
                cronometro();  
}
        </script>
    </head>
    <body>
    <script type="text/javascript">   
           
        </script>
        <button id="inicio" onclick="start()">PLAY</button>

<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj"></div>
    </body>
</html>
Título: Re:Javascript cronómetro de cuenta atrás Funciones Timers setInterval CU01164E
Publicado por: Ogramar en 10 de Julio 2017, 19:40
Buenas Pepote21, veo los ejercicios correctos. Como siempre recomendarte que limpies el código y evites dejar comentarios no útiles o etiquetas vacías

Salu2