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: paramonso en 12 de Marzo 2018, 13:11
-
Hola. Dejo el ejercicio CU01171E redireccionar url JavaScript recargar window location href assign del taller de programación web con JavaScript.
EJERCICIO
Crea una página web que al ser invocada muestre un mensaje “Hemos cambiado de ubicación esta página. En breves momentos será redireccionado…” junto a una cuenta atrás que muestre 5, 4, 3, 2, 1 (correspondiente a 5 segundos). Tras transcurrir 5 segundos y mostrarse la cuenta atrás, el usuario debe ser redireccionada a la url http://aprenderaprogramar.com. Para realizar este ejercicio debes usar la propiedad window.location junto con funciones que permitan el retardo en la ejecución vistas en entregas anteriores del curso.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
contador=5;
function ejemplo()
{
var msg="Hemos cambiado de ubicación esta página.<br/> En breves momentos será redireccionado…"
document.all.pizarra.innerHTML=msg;
var t = setInterval(function(){cronometro()},1000);
}
function cronometro()
{
if (contador>0)
{
msg=contador;
contador=contador-1
document.all.pizarra2.innerHTML=msg;
}
else
{
clearInterval(cronometro);
window.location.assign('http://aprenderaprogramar.com');
}
}
</script>
<style type="text/css">
body{background-color:yellow;}
h1,h2,h3{
text-align:center;
margin:0;
padding:0;
color:black;
}
#pizarra,#pizarra2
{
text-align:center;
padding:5px;
overflow:hidden;
float:left;
margin-left:400px;
margin-top:100px;
color:red;
}
#pizarra
{
font-size:30px;
border-radius:25px 25px;
background-color:white;
border:groove red 3px;
padding:10px;
}
#pizarra2
{
clear:both;
margin-left:650px;
margin-top:10px;
float:left;
font-size:200px
}
</style>
</head>
<body onload="ejemplo()">
<div id="cabecera">
<h1>Ejercicio JavaScript CU01171E</h1>
<h2>Rediccionamiento de pagina con cuenta atras</h2>
<div id="pizarra"></div>
<div id="pizarra2"></div>
</div>
</body></html>
Garcias un saludo.
;D
-
Buenas, todo bien. Salu2