Simulator de ceas Word configurabil: 3 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Acesta nu este tocmai un instructabil. Îmi proiectez propriul Word Clock și am decis să construiesc mai întâi un simulator de aplicații web, astfel încât să pot stabili grila și să testez cum arată în diferite momente ale zilei. Apoi mi-am dat seama că acest lucru ar putea fi util pentru alte persoane care lucrează la ceasuri de cuvinte și am decis să le împărtășesc.

Aplicația este un singur fișier HTML scurt. Dacă îl salvați și faceți dublu clic pe acesta, acesta se va deschide în browserul dvs. și va începe să afișeze ora curentă. Apoi va actualiza afișajul la fiecare 10 secunde dacă s-a schimbat ora.

Există, de asemenea, un câmp de text în care puteți tasta în orice moment specific și puteți vedea cum va arăta în proiectul dvs.

Proiectarea oricărui ceas de cuvinte este diferită, așa că am încercat să fac codul ușor de configurat. Consultați următorii pași pentru indicii despre cum să faceți acest lucru.

Sper să vă fie de ajutor! Este minunat să puteți experimenta aspectele și formularea înainte de a vă angaja în hardware!

Pasul 1: Descărcați fișierul HTML

Simulatorul este o aplicație web cu un singur fișier. Este puțin sub 200 de linii. O puteți descărca de aici.

(Nu există într-adevăr un buton pentru a descărca fișierul pe Github. Dar puteți selecta conținutul fișierului, copiați și lipiți într-un nou fișier text de pe computer. Asigurați-vă că numiți fișierul ceva.html.)

După ce l-ați descărcat, faceți dublu clic pe fișier și acesta se va încărca într-o filă din browser. Ar trebui să vedeți ora curentă afișată într-o grilă de cuvinte.

Notă: Am testat aplicația folosind Chrome numai pe Windows.

Pasul 2: Editați grila

Puteți încerca diferite planuri de cuvinte editând fragmentul de Javascript care arată astfel:

var row_strs = [„ESTE”, „UN DOUĂ TREI”, „PATRU CINCI ȘASE”, „ȘAPTE OPȚIU”, „NOUĂ ZECE”, „UNZEPECE DOUĂZEP”, „OH CINȚE ZEP”, „CINZECE DOUĂZECI”, „O treizeci de ore”, „FORTY FIFTY FIVE”, „APRO-MIDI”, „NOAPTE dimineața”,];

Dacă adăugați / ștergeți rânduri și reîncărcați pagina, grila dvs. va fi mai mare sau mai mică.

Și dacă adăugați mai multe litere la fiecare rând, grila dvs. se va lărgi. Asigurați-vă că toate rândurile au același număr de litere.

Veți observa că șirurile din codul de mai sus au spații, dar acestea se transformă în caractere aleatorii în grilă. Puteți alege setul de caractere care vor fi utilizate aleatoriu pentru a umple acele spații, editând linia care arată astfel:

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

Pasul 3: Schimbați formularea

Va trebui să știți cum să scrieți codul dacă doriți să utilizați diferite formulări. Logica care ia o dată și o transformă în cuvinte se află în funcția numită dateToSentence ().