Konfigurerbar Word Clock Simulator: 3 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

Dette er ikke ligefrem en instruerbar. Jeg designer mit eget Word Clock og besluttede først at bygge en webappsimulator, så jeg kunne lægge gitteret ud og teste, hvordan det ser ud på forskellige tidspunkter af dagen. Så indså jeg, at dette kunne være nyttigt for andre mennesker, der arbejder med ordure, og besluttede at dele det.

Appen er en enkelt kort HTML -fil. Hvis du gemmer det og dobbeltklikker på det, åbnes det i din browser og begynder at vise den aktuelle tid. Derefter opdaterer displayet hvert 10. sekund, hvis tiden er ændret.

Der er også et tekstfelt, hvor du kan indtaste et bestemt tidspunkt og se, hvordan det vil se ud i dit projekt.

Alles ordurdesign er anderledes, så jeg forsøgte at konfigurere koden let. Se de næste trin for at få tip til, hvordan du gør det.

Jeg håber, at du finder dette nyttigt! Det er fantastisk at være i stand til at eksperimentere med layout og ordlyd, før du går på hardware!

Trin 1: Download HTML -filen

Simulatoren er en enkeltfil-webapp. Det er lige under 200 linjer. Du kan downloade den her.

(Der er ikke rigtig en knap til at downloade filen på Github. Men du kan bare vælge filens indhold, kopiere og indsætte i en ny tekstfil på din computer. Sørg for at navngive filen something.html.)

Når du har downloadet den, skal du dobbeltklikke på filen, og den indlæses i en fane i din browser. Du bør se den aktuelle tid vises i et ordgitter.

Bemærk: Jeg har kun testet appen ved hjælp af Chrome på Windows.

Trin 2: Rediger gitteret

Du kan prøve forskellige ordlayouter ved at redigere det stykke Javascript, der ser sådan ud:

var row_strs = ["DET ER", "ET TO TRE", "FIRE FEM SIX", "SEVTE OTTE", "NINE TI", "ELEVEN TWELVE", "OH Five TEN", "FIFTEN TWENTY", "CLOCK THIRTYY", "FORTY FEMTY FIVE", "OM eftermiddagen", "OM NATTEN",];

Hvis du tilføjer/sletter rækker og indlæser siden igen, vil dit gitter være større eller mindre.

Og hvis du tilføjer flere bogstaver til hver række, bliver dit gitter bredere. Bare sørg for at alle rækker har samme antal bogstaver.

Du vil bemærke, at strengene i koden ovenfor har mellemrum, men dem bliver til tilfældige tegn i gitteret. Du kan vælge det sæt tegn, der tilfældigt skal bruges til at udfylde disse mellemrum ved at redigere den linje, der ser sådan ud:

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

Trin 3: Skift ordlyden

Du skal vide, hvordan du skriver kode, hvis du vil bruge forskellige formuleringer. Logikken, der tager en dato og gør den til ord, er i funktionen kaldet dateToSentence ().