Konfigurerbar Word Clock Simulator: 3 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:37

Detta är inte direkt en instruerbar. Jag håller på att designa min egen Word Clock och bestämde mig för att först bygga en webbappsimulator så att jag kunde lägga ut rutnätet och testa hur det ser ut vid olika tider på dygnet. Då insåg jag att detta kunde vara användbart för andra människor som arbetar med ordklockor, och bestämde mig för att dela det.

Appen är en enda kort HTML -fil. Om du sparar det och dubbelklickar på det öppnas det i din webbläsare och börjar visa aktuell tid. Därefter uppdateras displayen var 10: e sekund om tiden har ändrats.

Det finns också ett textfält där du kan skriva in en specifik tid och se hur det kommer att se ut i ditt projekt.

Allas ordklockdesign är annorlunda, så jag försökte göra koden enkelt konfigurerad. Se de följande stegen för tips om hur du gör det.

Jag hoppas att du tycker att det här är till hjälp! Det är fantastiskt att kunna experimentera med layouter och formuleringar innan man begår hårdvara!

Steg 1: Ladda ner HTML -filen

Simulatorn är en webbfil med en fil. Det är knappt 200 rader. Du kan ladda ner den här.

(Det finns egentligen inte en knapp för att ladda ner filen på Github. Men du kan bara välja filinnehåll, kopiera och klistra in i en ny textfil på din dator. Var noga med att namnge filen something.html.)

När du har laddat ner den dubbelklickar du på filen och den laddas i en flik i din webbläsare. Du bör se den aktuella tiden visas i ett ordnät.

Obs! Jag har bara testat appen med Chrome i Windows.

Steg 2: Redigera rutnätet

Du kan prova olika ordlayouter genom att redigera den del av Javascript som ser ut så här:

var row_strs = ["DET ÄR", "ETT TRE TRE", "FYRA FEM SIX", "SJU Åtta", "NIO TIEN", "ELVEN TOLV", "ÅH Fem tio", "femton tjugo", "klockan trettio", "FORTY FEMTY FIVE", "IN THE EFTERNOON", "AT NIGHT MORNING",];

Om du lägger till/tar bort rader och laddar om sidan blir ditt rutnät större eller mindre.

Och om du lägger till fler bokstäver till varje rad blir ditt rutnät bredare. Se bara till att alla rader har samma antal bokstäver.

Du kommer att märka att strängarna i koden ovan har mellanslag, men de förvandlas till slumpmässiga tecken i rutnätet. Du kan välja teckenuppsättningen som slumpmässigt ska användas för att fylla dessa utrymmen genom att redigera raden som ser ut så här:

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

Steg 3: Ändra formuleringen

Du måste veta hur du skriver kod om du vill använda olika formuleringar. Logiken som tar ett datum och gör det till ord är i funktionen som kallas dateToSentence ().