Simulador de rellotge de paraules configurable: 3 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:11

Això no és exactament una instrucció. Estic dissenyant el meu propi Word Clock i vaig decidir construir primer un simulador d'aplicacions web per poder dissenyar la graella i provar-ne l'aspecte a diverses hores del dia. Llavors em vaig adonar que això podria ser útil per a altres persones que treballaven en rellotges de paraules i vaig decidir compartir-ho.

L'aplicació és un únic fitxer HTML curt. Si el deseu i hi feu doble clic, s’obrirà al navegador i començarà a mostrar l’hora actual. A continuació, actualitzarà la pantalla cada 10 segons si ha canviat l'hora.

També hi ha un camp de text on podeu escriure en qualsevol moment concret i veure com quedarà al vostre projecte.

El disseny del rellotge de paraules de tothom és diferent, així que he intentat configurar el codi fàcilment. Consulteu els passos següents per obtenir suggeriments sobre com fer-ho.

Espero que us sigui útil. És fantàstic poder experimentar amb dissenys i redacció abans de comprometre’s amb el maquinari.

Pas 1: baixeu el fitxer HTML

El simulador és una aplicació web d’un sol fitxer. És poc menys de 200 línies. Podeu descarregar-lo aquí.

(Realment no hi ha cap botó per baixar el fitxer a Github. Però només podeu seleccionar el contingut del fitxer, copiar-lo i enganxar-lo en un fitxer de text nou a l'ordinador. Assegureu-vos de posar-hi el nom de algo.html.)

Després de descarregar-lo, feu doble clic al fitxer i es carregarà en una pestanya del navegador. Hauríeu de veure l'hora actual en una graella de paraules.

Nota: només he provat l'aplicació mitjançant Chrome a Windows.

Pas 2: Editeu la quadrícula

Podeu provar diferents dissenys de paraules editant el fragment de Javascript que té aquest aspecte:

var row_strs = ["ÉS", "UN DOS TRES", "QUATRE CINC SIS", "SET VUIT", "NOU DEU", "ONZE DOTZE", "OH CINC DEU", "QUINZE VINT", "HORARI TRENTA", "Quaranta cinquanta cinc", "A LA TARDA", "A LA NIT AL MATÍ",];

Si afegiu / suprimiu files i torneu a carregar la pàgina, la quadrícula serà més gran o més petita.

I si afegiu més lletres a cada fila, la graella s’ampliarà. Assegureu-vos que totes les files tinguin el mateix nombre de lletres.

Notareu que les cadenes del codi anterior tenen espais, però es converteixen en caràcters aleatoris a la graella. Podeu triar el conjunt de caràcters que s’utilitzaran a l’atzar per omplir aquests espais editant la línia que té aquest aspecte:

var RANDCHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ @ # $% &";

Pas 3: canvieu la redacció

Haureu de saber escriure codi si voleu utilitzar un fraseig diferent. La lògica que pren una data i la converteix en paraules es troba en la funció anomenada dateToSentence ().