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

Iniciado por Cyber-Cyclop, 2 Noviembre 2012, 05:57 AM

0 Miembros y 1 Visitante están viendo este tema.

Cyber-Cyclop

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:



<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

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

javascript

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


CSS

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