Konfigurerbar Word Clock Simulator: 3 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:21

Dette er ikke akkurat en instruerbar. Jeg designer min egen Word Clock, og bestemte meg for å først bygge en webappsimulator slik at jeg kunne legge ut rutenettet og teste hvordan det ser ut på forskjellige tider av døgnet. Da skjønte jeg at dette kunne være nyttig for andre som jobber med ordklokker, og bestemte meg for å dele det.

Appen er en enkelt HTML -fil. Hvis du lagrer det og dobbeltklikker på det, åpnes det i nettleseren din og begynner å vise gjeldende tid. Deretter oppdaterer displayet hvert 10. sekund hvis tiden har endret seg.

Det er også et tekstfelt der du kan skrive inn en bestemt tid og se hvordan det vil se ut i prosjektet ditt.

Alles ordklokke design er annerledes, så jeg prøvde å gjøre koden enkelt konfigurert. Se de neste trinnene for tips om hvordan du gjør det.

Jeg håper du synes dette er nyttig! Det er flott å kunne eksperimentere med oppsett og ordlyd før du forplikter deg til maskinvare!

Trinn 1: Last ned HTML -filen

Simulatoren er en enkeltfil-webapp. Det er i underkant av 200 linjer. Du kan laste den ned her.

(Det er egentlig ikke en knapp for å laste ned filen på Github. Men du kan bare velge filinnholdet, kopiere og lime inn i en ny tekstfil på datamaskinen din. Sørg for å gi filen noe.html.)

Etter at du har lastet den ned, dobbeltklikker du på filen og den lastes inn i en fane i nettleseren din. Du bør se gjeldende tid vises i et ordrutenett.

Merk: Jeg har bare testet appen ved hjelp av Chrome på Windows.

Trinn 2: Rediger rutenettet

Du kan prøve forskjellige ordoppsett ved å redigere delen av Javascript som ser slik ut:

var row_strs = ["DET ER", "ONE TO THREE", "FOUR FIVE SIX", "SEVEN EIGHT", "NINE TI", "ELEVEN TWELVE", "OH Five TEN", "FIFTEEN TWENTY", "CLOCK THIRTY", "FORTY FEMTY FIVE", "OM ETTERMIDDAGEN", "PÅ NATTEN MORGEN",];

Hvis du legger til/sletter rader og laster inn siden på nytt, blir rutenettet større eller mindre.

Og hvis du legger til flere bokstaver i hver rad, blir rutenettet bredere. Bare sørg for at alle radene har samme antall bokstaver.

Du vil legge merke til at strengene i koden ovenfor har mellomrom, men de blir omgjort til tilfeldige tegn i rutenettet. Du kan velge settet med tegn som skal brukes tilfeldig til å fylle mellomrommene ved å redigere linjen som ser slik ut:

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

Trinn 3: Endre formuleringen

Du må vite hvordan du skriver kode hvis du vil bruke forskjellige formuleringer. Logikken som tar en dato og gjør den til ord, er i funksjonen kalt dateToSentence ().