Konfigurowalny symulator zegara Word Clock: 3 kroki

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:27

To nie jest dokładnie instrukcja. Projektuję własny Word Clock i postanowiłem najpierw zbudować symulator aplikacji internetowej, aby móc rozłożyć siatkę i przetestować, jak wygląda w różnych porach dnia. Potem zdałem sobie sprawę, że może to być przydatne dla innych osób pracujących na zegarach słownych i postanowiłem się tym podzielić.

Aplikacja to pojedynczy krótki plik HTML. Jeśli go zapiszesz i klikniesz dwukrotnie, otworzy się w przeglądarce i zacznie wyświetlać aktualny czas. Następnie będzie aktualizować wyświetlacz co 10 sekund, jeśli czas się zmienił.

Istnieje również pole tekstowe, w którym możesz wpisać w dowolnym momencie i zobaczyć, jak będzie wyglądać w Twoim projekcie.

Każdy projekt zegara jest inny, dlatego starałem się, aby kod był łatwy w konfiguracji. Zobacz kilka następnych kroków, aby uzyskać wskazówki, jak to zrobić.

Mam nadzieję, że okaże się to pomocne! Wspaniale jest móc poeksperymentować z układami i sformułowaniami przed zainstalowaniem sprzętu!

Krok 1: Pobierz plik HTML

Symulator to jednoplikowa aplikacja internetowa. To niecałe 200 linii. Możesz go pobrać tutaj.

(Tak naprawdę nie ma przycisku do pobrania pliku na Github. Ale możesz po prostu wybrać zawartość pliku, skopiować i wkleić do nowego pliku tekstowego na swoim komputerze. Pamiętaj, aby nazwać plik coś.html.)

Po pobraniu kliknij dwukrotnie plik, a zostanie on załadowany na karcie w przeglądarce. Powinieneś zobaczyć aktualny czas wyświetlany w siatce słów.

Uwaga: testowałem aplikację tylko w Chrome w systemie Windows.

Krok 2: Edytuj siatkę

Możesz wypróbować różne układy słów, edytując fragment JavaScript, który wygląda tak:

var wiersz_strs = [„TO JEST”, „JEDEN DWA TRZY”, „CZTERY PIĘĆ SZEŚĆ”, „SIEDEM ÓSMA”, „DZIEWIĘĆ DZIESIĘĆ”, „JEDENASTA DWANAŚCIE”, „O PIĘĆ DZIESIĘĆ”, „PIĘTNAŚCIE DWADZIEŚCIA”, „GODZINA TRZYDZIESTA”, "CZTERDZIEŚCI PIĘĆDZIESIĄT PIĘĆ", "POPOŁUDNIE", "W NOCY RANO",];

Jeśli dodasz/usuniesz wiersze i ponownie załadujesz stronę, Twoja siatka będzie większa lub mniejsza.

A jeśli dodasz więcej liter w każdym rzędzie, twoja siatka powiększy się. Tylko upewnij się, że wszystkie wiersze mają taką samą liczbę liter.

Zauważysz, że ciągi w powyższym kodzie mają spacje, ale te zostają zamienione na losowe znaki w siatce. Możesz wybrać zestaw znaków, które będą losowo używane do wypełnienia tych przestrzeni, edytując linię, która wygląda tak:

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

Krok 3: Zmień sformułowanie

Musisz wiedzieć, jak pisać kod, jeśli chcesz używać innego sformułowania. Logika, która przyjmuje datę i zamienia ją w słowa, znajduje się w funkcji o nazwie dateToSentence().