Mostrar Mensajes
1041
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Reloj JavaScript tiempo real Manual de estilo: normas y convenciones CU01191E#
« en: 20 de Febrero 2016, 00:13 »
Buenas, otra solución más.
A partir del siguiente código:
Y la respuesta:
Según las reglas de estilo debería haber colocado el código javaScript en un archivo independiente y el código CSS lo mismo, aunque lo he dejado junto para que sea mas fácil de leer, en este caso el jercicio.
Saludos.
A partir del siguiente código:
Citar
<HTML><HEAD><TITLE>JavaScript Index</TITLE><script Language="JavaScript">
function goback(){alert("Good Bye!");history.go(-1);}
function getthedate() {Todays = new Date();
TheDate = "" + (Todays.getMonth()+ 1) +" / "+ Todays.getDate() + " / " +
Todays.getYear()
document.clock.thedate.value = TheDate;
}
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () { stopclock(); getthedate()
showtime();
}
function showtime () {
var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000); timerRunning = true;
}
</script>
</HEAD>
<BODY bgcolor="#00FFFF" onLoad="startclock()">
<CENTER><h2>Esto es un reloj hecho con JavaScript</h2>
<table border><tr>
<td><form name="clock" onSubmit="0"></td>
</tr>
<tr>
<td colspan=2>Hoy es: <input type="text" name="thedate" size=12 value=""></td>
<td colspan=2>La hora es: <input type="text" name="face" size=12
value=""></td></form>
</tr>
</table>
</CENTER>
<hr>
<center>
<h3>
[<a href="http://aprenderaprogramar.com">Volver</a>]
</h3></center></BODY></HTML>
Citar
a) Reescribe el código HTML que presenta distintas deficiencias y no se ajusta a las normas de estilo habituales.
b) Reescribe el código JavaScript para que cumpla con las normas de estilo que hemos estudiado.
c) Corrige el código del reloj para que se vea una mejor presentación y funcione correctamente.
d) Incluye comentarios en el código indicando qué es lo que hacen las diferentes partes del código JavaScript.
e) Como resultado de este ejercicio debes presentar el código con todos los cambios antes mencionados.
Y la respuesta:
Código: [Seleccionar]
<html>
<head>
<title>JavaScript Index</title>
<meta charset="utf-8">
<style>
*{text-align: center;}
.styleClassReloj{
font-size: 44px;
color: white;
background: green;
margin: 0 auto;
border: solid 3px blue;
border-radius: 180px;
width: 300px;
height: 300px;
}
#fecha{
position: relative;
top: 75px;
}
#hora{
position: relative;
top: 100px;
}
.centrado{
margin: 0 auto;
width: 290px;
}
</style>
<script Language="JavaScript">
'use strict';
var timerID = null;
/*Desde window.onload, después de haber cargado el html, se llama a la función
getTheDate() y showTime().*/
window.onload = function(){
getTheDate();
showTime();
}
/*La función getTheDate() crea un objeto Date, y nos muestra la fecha actual.*/
function getTheDate(){
var nodoFecha = document.getElementById('fecha');
var today = new Date();
var theDate = today.getDate() + " / " + (today.getMonth() + 1);
theDate += " / " + today.getFullYear();
nodoFecha.innerHTML = theDate;
}
/*La función showTime() crea un objeto Date, y nos muestra la hora actual de
forma dinámica.*/
function showTime(){
var nodoHora = document.getElementById('hora');
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeValue = ((hours >12) ? hours -12 :hours);
timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
timeValue += (hours >= 12) ? " P.M." : " A.M.";
nodoHora.innerHTML = timeValue;
timerID = setTimeout('showTime()',1000);
}
</script>
</head>
<body>
<h2 class="centrado">Esto es un reloj hecho con JavaScript</h2>
<div class="styleClassReloj">
<div id="fecha" ></div>
<div id="hora" ></div>
</div>
<h3 class="centrado">
<a href="http://aprenderaprogramar.com">http://aprenderaprogramar.com</a>
</h3>
</body>
</html>Según las reglas de estilo debería haber colocado el código javaScript en un archivo independiente y el código CSS lo mismo, aunque lo he dejado junto para que sea mas fácil de leer, en este caso el jercicio.
Saludos.
. Lastima no tener mas tiempo.
RSS