Permite que puedas contar la fecha de tu blog, de hecho, "Date.parse(todaystring)" lo que hace es devolverte los milisegundos transcurridos desde la fecha todaystring. Empecé entonces a pensar en los temporizadores y esas cosas recordando que también quiero cambiar los colores y fuentes de algunas partes del blog. Mhh ¿Y si cambiara la frase de bienvenida según el día? Los Lunes son siempre grises, haga el tiempo que haga, los domingos los asocio al rojo por el calendario. También hay frases más brillantes que otras, a una cita de shakespeare le queda mejor una courier o una romana que una helvética. El negro es muy serio para la frase de los ilegales, si pongo una cita de shin-chan debería ser estridente y parpadeante... ¿Se puede hacer algo así? Sip, los estilos a nuestra ayuda.
Los estilos, CSS para los amigos, nos permiten formatear el texto respecto a una serie de parámetros que le asociemos a cada elemento de la página mostrada, aunque el w3c quiere descartarlos para que el XML ocupe su lugar, la comunidad no parece muy dispuesta al cambio, así que supongo que podremos usarlos sin riesgo. Por otro lado, cada software de blog parece tener su propia hohja de estilos y hacer un script para cada uno sería demasiado trabajo para alguien como yo, así que se me ocurrió otra cosa, añadir mi propio estilo en en texto que quiero modificar y así poder actuar sobre el sin interferencias.
En el script anterior, si os fijais coloco dos modificadores a la etiqueta "a" (ancla), "id" que me permite identificarla y "style" donde le especifico que características va a tener el texto mostrado. Vamos a jugar con eso con las variables de fechas y con una cosa que se llama temporizador para hacer efectos raros en nuestos textos. Lo recomendable sería definir una hoja de estilo, pero para nuestro caso es más fácil hacerlo a lo bestia.
Primero vamos a definir en una etiqueta su identificador y sus estilos, usaré la etiqueta p (párrafo) aunque también vale la div (que suelo usar para hacer recuadros flotantes). Recordad que siempre hay que cerrar una etiqueta. Los estilos se separan con punto y coma. Los estilos se definen con nombre:valor siendo el nombre uno de los estilos válidos y su valor el le queramos dar correspondiente a que estilo sea (en el w3c está mas completo pero mas embarullado):
<p id="etiquetadecolores" style="background-color: #00CC00; color: #FF0000; font-weight:bold; font-size: 150%; font-family: 'Times New Roman';font-style: italic;font-variant: small-caps;text-align: center;letter-spacing: 0.5em;word-spacing: 0.5em;">Este es un texto de prueba</p>
Que se vería asin de fonito.
Loren Ipsum y lo que siga con el velóz murciélago hindú o la rauda Iguana papagayo que come Ranas Marcianas en la cresta de una ola de erotismo que nos invade la Zozobra a babor resopla la Ballena Blanca paloma de la paz de espíritu de lucha de clases de Bachillerato era donde te enseñaban unos tobillos Finísimos era lo que se decía de los lenguados se están agotando la paciencia es la madre de la ciencia gaya que es del amor por uno mismo que la otra Vez
!!!MIS OJOS!!! X-C ARRGH, HE CREADO UN MONSTRUOOOO =8-0, DUELEEEEeeee
No se puede dejar una criatura como esa sin control, para eso me he vuelto mico creando la tabla de al lado, si pinchais sobre sus eldad podreis domar ese estilo hasta que deje de haceros llorar los ojos. ¿Como lo hice, pues fácil, lo primero fue hacerse una función de JavaScript a la que poder pedir que cambiara el estilo. Está pensada para llamarla de dos formas, si sólo quieres cambiar una propiedad, la llamas escribiendo la propiedad que quieres cambiar, y a continuación el valor que quieres asignarle (que está dentro de una tabla), si quieres cambiarlo todo, pones en blanco el parámetro quecambiar y luego los indices a las tablas de propiedades.
Livínbride :: Equivalencias en javascript de las propiedades CSS
Si mirais el código de la tabla vereis que estilos he aplicado en cada celda.
<script type='text/javascript'>
CambiaEstilos("etiquetadecolores",0,0)
</script>
Asignaría el valor 1 (blanco) a el color de fondo en la etiqueta con id="etiquetadecolores".
<script type='text/javascript'>
CambiaEstilos('etiquetadecolores','todas',9,12,5,1,3,4,5,12,2)"
</script>
Cambiaría todos los valores, cada parámetro numérico se corresponde en orden con el de las indicados a continuación, su resultado se ve en la tabla aneja según orden de izquierda a derecha.
<script type='text/javascript'>
CambiaEstilos('etiquetadecolores',1,'aleatorio')
</script>
Cambia el color de la fuente al azar.
<script type='text/javascript'>
CambiaEstilos('etiquetadecolores','aleatorio')
</script>
Cambia el estilo de la fuente al azar.
Los valores posibles son:
Color de fondo = 0 , 12 posibilidades
Color de fuente = 1 , 12 posibilidades
Tamaño de fuente = 2 , 12 posibilidades
Estilo de fuente = 3 , 4 posibilidades
Tipo de fuente = 4 , 12 posibilidades
Espacio entre letras = 5 , 12 posibilidades
Espacio enrtre palabras = 6 , 12 posibilidades
Grosor de fuente = 7 , 12 posibilidades
Variante de fuente = 8 , 2 posibilidades
<script type="text/javascript">
function CambiaEstilos(identificador,quecambiar,Pestilo1,Pestilo2,Pestilo3,Pestilo4,Pestilo5,Pestilo6,Pestilo7,Pestilo8,Pestilo9)
{
propiedades=new Array()
propiedades[0]=["backgroundColor","#FFFFFF", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#000000", "#333333", "#666666", "#999999", "#CCCCCC"];
propiedades[1]=["color","#FFFFFF","#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#000000", "#333333", "#666666", "#999999", "#CCCCCC"];
propiedades[2]=["fontSize","10%","25%","50%","75%","100%","110%","125%","150%","175%","200%","300%","1000%"];
propiedades[3]=["fontStyle","normal","italic","oblique"];
propiedades[4]=["fontFamily","'times new roman', times, serif","sans-serif","Courier","Comic Sans MS","Verdana","Geneva","'Palatino Linotype'","'Franklin Gothic Medium'","Script","Marlett0","'Lucida Console'","Tahoma"];
propiedades[5]=["letterSpacing","-0.5em","-0.1em","-0.05em","0.1em","0.2em","0.3em","0.4em","0.5em","0.7em","0.9em","1.0em","2.0em"];
propiedades[6]=["wordSpacing","-0.5em","-0.1em","-0.05em","0.1em","0.2em","0.3em","0.4em","0.5em","0.7em","0.9em","1.0em","2.0em"];
propiedades[7]=["fontWeight",100,123,150,200,250,300,400,500,600,700,800,900];
propiedades[8]=["fontVariant","normal","small-caps"];
/* Puede parecer que escribir tantos arrays sea inútil, pero me evita tener que escribir en las llamadas los estilos, sus propiedades y sus valores, además que luego puedo jugar con ellos a mi antojo*/
if(quecambiar == "aleatorio")
{
aleatorio = Math.random() * (propiedades.length - 1)
aleatorio = Math.floor(aleatorio)
aleaprop = Math.random() * (propiedades[aleatorio].length - 1)
aleaprop = Math.floor(aleaprop)
if (aleaprop == 0) {aleaprop = 1}
/* Evaluar estas expresiones suele ser lo más cómodo, no es que lo haya hecho muy finamente, debería haber ido de menos a mas, pero funciona*/
acambiar = eval("document.getElementById(identificador).style." + propiedades[aleatorio][0] + " = propiedades[aleatorio][aleaprop]")
}
else
{
if(quecambiar == "todas")
{
for(var i = 0; i < propiedades.length; i++)
{
pp=i+1
var estilo = eval("Pestilo" + pp)
acambiar = eval("document.getElementById(identificador).style." + propiedades[i][0] + " = propiedades[i][estilo]")
}
}
else
{
if(Pestilo1 == "aleatorio")
{
aleaprop = Math.random() * (propiedades[quecambiar].length - 1)
aleaprop = Math.floor(aleaprop)
if (aleaprop == 0) {aleaprop = 1}
acambiar = eval("document.getElementById(identificador).style." + propiedades[quecambiar][0] + " = propiedades[quecambiar][aleaprop]")
}
else
{
acambiar = eval("document.getElementById(identificador).style." + propiedades[quecambiar][0] + " = propiedades[quecambiar][Pestilo1]")
}
}
}
}
</script>
Otro script que me ha quedado largo.
0 comentarios:
Publicar un comentario