Añadir Estilo a javascript en HTML :: Ayuda Porfavor

Cyber-Cyclop · 2 Noviembre 2012, 05:57 AM

Bueenaas, espero que todos estén muy bien...

Pues estaba haciendo un documento en HTML en el que usaba javascript para hacer un efecto con el texto: que cada letra se fuera escribiendo poco a poco. El código es éste:

Código [Seleccionar]


<html>
<script type="text/javascript">
function showIt(){
setTimeout('document.write("<LETTER>");', 100)
setTimeout('document.write("<br />");', 100)
setTimeout('document.write("H");', 100)
setTimeout('document.write("e");', 300)
setTimeout('document.write("l");', 400)
setTimeout('document.write("l");', 500)
setTimeout('document.write("o");', 600)
setTimeout('document.write(",");', 700)
setTimeout('document.write(" ");', 800)
setTimeout('document.write("m");', 900)
setTimeout('document.write("y");', 1000)
setTimeout('document.write(" ");', 1200)
setTimeout('document.write("n");', 1300)
setTimeout('document.write("a");', 1400)
setTimeout('document.write("m");', 1500)
setTimeout('document.write("e");', 1600)
setTimeout('document.write(" ");', 1700)
setTimeout('document.write("i");', 1800)
setTimeout('document.write("s");', 1900)
setTimeout('document.write(" ");', 2000)
setTimeout('document.write("-");', 2100)
setTimeout('document.write("-");', 2200)
setTimeout('document.write("-");', 2300)
setTimeout('document.write("-");', 2400)
setTimeout('document.write(".");', 2500)
setTimeout('document.write("<br />");', 2600)
setTimeout('document.write("T");', 2700)
setTimeout('document.write("h");', 2800)
setTimeout('document.write("i");', 2900)
setTimeout('document.write("s");', 3000)
setTimeout('document.write(" ");', 3100)
setTimeout('document.write("i");', 3200)
setTimeout('document.write("s");', 3300)
setTimeout('document.write(" ");', 3400)
setTimeout('document.write("m");', 3500)
setTimeout('document.write("y");', 3600)
setTimeout('document.write(" ");', 3700)
setTimeout('document.write("f");', 3800)
setTimeout('document.write("i");', 3900)
setTimeout('document.write("r");', 4000)
setTimeout('document.write("s");', 4100)
setTimeout('document.write("t");', 4200)
setTimeout('document.write(" ");', 4300)
setTimeout('document.write("J");', 4400)
setTimeout('document.write("a");', 4500)
setTimeout('document.write("v");', 4600)
setTimeout('document.write("a");', 4700)
setTimeout('document.write("S");', 4800)
setTimeout('document.write("c");', 4900)
setTimeout('document.write("r");', 5000)
setTimeout('document.write("i");', 5100)
setTimeout('document.write("p");', 5200)
setTimeout('document.write("t");', 5300)
setTimeout('document.write(".");', 5400)
setTimeout('document.write("<br />");', 5500)
setTimeout('document.write(":");', 5600)
setTimeout('document.write(")");', 5700)
}
</script>
<title>
Hello.
</title>
	<body 
	style="background-color:black; font-family:'Lucida Console'; font-size:16px; color:cyan;">
	<br>
	<br>
	<br>
	<br>
	<br>
		<center>
		Press "Start" to Play!
	<br>
	<br>
		<input type="button" value="Start" onClick="showIt()" style="height: 25px; width: 100px; font-family:'Lucida Console'; font-size:14px;"></input>
		</center>
	</body>
</html>

Entonces lo que hace es, presionas el botón y comienza el script, pero todo el "style" que tenía, desaparece.
Mi duda es entonces, cómo hacer que el mismo "style" aplique también para cuando se está ejecutando el script, osea que este el fondo negro con las letras cyan y que se vaya escribiendo el texto poco a poco.

Pues es eso, muchas gracias

PD: Es la primera vez que creo un tema así que les pido mis más sinceras disculpas si puse el tema en un foro equivocado o si lo hice mal, gracias por su comprensión.

peib0l · 3 Noviembre 2012, 01:35 AM

Ejecuta el javascript dentro de un <div class=""></div> y aplica el estilo del texto a ese div exclusivamente.

javascript

Código [Seleccionar]


setTimeout('document.write("<div class=\"nombre_de_clase\">");', 100)
setTimeout('document.write("<div/>");', 5700)

CSS

Código [Seleccionar]


.nombre_de_clase{
color: cyan; //prueba el "tomato"
font-family:'Lucida Console'; 
font-size:16px;
}

Test Foro de elhacker.net SMF 2.1

Añadir Estilo a javascript en HTML :: Ayuda Porfavor

Cyber-Cyclop

peib0l