Mostrar Mensajes
61
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript setInterval reloj cronómetro cuenta atrás requestAnimationFr CU01164E
« en: 25 de Febrero 2016, 22:10 »Citar
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el método setInterval.
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
var llamada = setInterval (reloj,500);
}
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;
}
</script>
</head>
<body >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > </div>
</div>
</body></html>Citar
EJERCICIO 2
Crea un reloj JavaScript que marque los segundos usando el método requestAnimationFrame.
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var globalID;
function empecemos(){
var empezar = requestAnimationFrame(reloj);
}
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;
}
</script>
</head>
<body onload="empecemos()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > </div>
</div>
</body></html>Citar
EJERCICIO 3Para este ejercicio, me hice un poco de lio porque no sabía cómo hacerlo. Después de termiarlo miré cómo lo habían hecho otros compañeros y la forma que lo había heho Pedro, no hubiese caido nunca de hacerlo por ahí, pero parece más sencilla.
Crea un reloj JavaScript que marque inicialmente 01:00 (es decir, 1 minuto) y que marche hacia atrás (00:59, 00:58, 00:57 … etc.) hasta llegar a 00:00. Cuando llegue a 00:00 debe deternerse y mostrar el mensaje: “Tu tiempo ha terminado”.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
}
#ventana{
margin:auto;
display:block;
position:absolute;
height:200px;
width:400px;
background: pink;
border:solid 1px black;
}
#reloj{
position: absolute;
top:40px;
left:120px;
font-size: 80px;
color:dodgerblue;
text-align: center;
}
</style>
<script>
var segundos = 0;
var minutos = 1;
var llamada;
var ceromin='';
var ceroseg='';
function cuentaAtras(){
devolvercero(minutos,segundos);
segundos = segundos % 60;
document.getElementById("reloj").innerHTML=ceromin+minutos+':'+ceroseg+segundos;
if (minutos ===0 && segundos ===0){
alert ("Se agotó su tiempo");
clearTimeOut(llamada);
}
if (segundos ==0){
minutos --;
segundos+=60;
}
segundos --;
var llamada = setTimeout(cuentaAtras,1000);
}
function devolvercero(minutos,segundos){
if (minutos<10){
ceromin='0';
}
if (segundos<10){
ceroseg='0';
}else {
ceroseg='';
}
return ceroseg;return ceromin;
}
</script>
</head>
<body onload="cuentaAtras()">
<div id="ventana">
<div id="reloj">
</div>
</div>
</body>
</html>Saludos
RSS