Opstelbare woordklok -simulator: 3 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:23

Dit is nie juis 'n opdrag nie. Ek ontwerp my eie Word Clock en besluit om eers 'n web -app -simulator te bou sodat ek die rooster kan uitlê en kan toets hoe dit op verskillende tye van die dag lyk. Toe besef ek dat dit nuttig kan wees vir ander mense wat aan woordhorlosies werk, en het besluit om dit te deel.

Die app is 'n enkele kort HTML -lêer. As u dit stoor en dubbelklik daarop, sal dit in u blaaier oopmaak en die huidige tyd begin wys. Dan sal die skerm elke 10 sekondes opdateer as die tyd verander het.

Daar is ook 'n teksveld waar u enige spesifieke tyd kan tik en kan sien hoe dit in u projek sal lyk.

Almal se woordklokontwerp is anders, so ek het probeer om die kode maklik op te stel. Sien die volgende paar stappe vir wenke oor hoe om dit te doen.

Ek hoop u vind dit nuttig! Dit is wonderlik om te kan eksperimenteer met uitlegte en bewoording voordat u hardeware gebruik!

Stap 1: Laai die HTML -lêer af

Die simulator is 'n webprogram met 'n enkele lêer. Dit is net minder as 200 reëls. U kan dit hier aflaai.

(Daar is nie regtig 'n knoppie om die lêer op Github af te laai nie. Maar u kan die inhoud van die lêer kies, kopieer en in 'n nuwe tekslêer op u rekenaar plak. Maak seker dat u die lêer iets noem. Html.)

Nadat u dit afgelaai het, dubbelklik op die lêer en dit sal in 'n oortjie in u blaaier gelaai word. U moet die huidige tyd in 'n woordrooster sien.

Nota: ek het die program slegs met Chrome op Windows getoets.

Stap 2: Wysig die rooster

U kan verskillende woorduitlegte probeer deur die stuk Javascript te redigeer wat so lyk:

var row_strs = ["DIT IS", "EEN TWEE DRIE", "VIER VYF SES", "SEWE Agt", "NEGE TIEN", "ELF TWEELVE", "O VYF TIEN", "VYFTIEN TWINTIGE", "OCLOCK THIRTY", "VEERTIG VYFTIG VYF", "IN DIE MIDDAG", "NA NAGTEND",];

As u rye byvoeg/uitvee en die bladsy herlaai, sal u rooster groter of kleiner wees.

En as u meer letters by elke ry voeg, word u rooster wyer. Maak seker dat al die rye dieselfde aantal letters bevat.

U sal sien dat die snare in die kode hierbo spasies het, maar dit word in willekeurige karakters in die rooster verander. U kan die stel karakters kies wat lukraak gebruik sal word om die spasies te vul deur die reël wat so lyk te wysig:

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

Stap 3: Verander die bewoording

U moet weet hoe om kode te skryf as u verskillende frases wil gebruik. Die logika wat 'n datum neem en dit in woorde verander, is in die funksie genaamd dateToSentence ().