Autor Tema: Reloj JavaScript tiempo real Manual de estilo: normas y convenciones CU01191E# (Leído 3248 veces)

pedro,, · « **en:** 20 de Febrero 2016, 00:13 »

Buenas, otra solución más.

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.

César Krall · « **Respuesta #1 en:** 21 de Febrero 2016, 18:31 »

Hola! Aprovechando que le has puesto una forma redonda al reloj así te digo que ha quedado el ejercicio, redondo

En <script Language="JavaScript"> pondríamos mejor <script> simplemente que es como más modernamente se está escribiendo, o bien <script type="javascript"> que es también bastante estándar.

Saludos!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: