Конфигурируем симулатор на Word Clock: 3 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:50

Това не е точно инструкция. Проектирам свой собствен Word Clock и реших първо да създам симулатор на уеб приложение, за да мога да изложа мрежата и да тествам как изглежда в различни часове на деня. Тогава разбрах, че това може да бъде полезно за други хора, работещи с часовници за думи, и реших да го споделя.

Приложението е единичен кратък HTML файл. Ако го запазите и щракнете двукратно върху него, той ще се отвори във вашия браузър и ще започне да показва текущото време. След това ще актуализира дисплея на всеки 10 секунди, ако времето се е променило.

Има и текстово поле, където можете да въведете във всеки конкретен момент и да видите как ще изглежда във вашия проект.

Дизайнът на часовника за всеки е различен, затова се опитах да направя кода лесно да се конфигурира. Вижте следващите няколко стъпки за съвети как да направите това.

Надявам се да намерите това за полезно! Страхотно е да можете да експериментирате с оформления и формулировки, преди да се ангажирате с хардуер!

Стъпка 1: Изтеглете HTML файла

Симулаторът е еднофайлово уеб приложение. Това е малко под 200 реда. Можете да го изтеглите тук.

(Всъщност няма бутон за изтегляне на файла в Github. Но можете просто да изберете съдържанието на файла, да го копирате и поставите в нов текстов файл на вашия компютър. Не забравяйте да дадете име на файла something.html.)

След като го изтеглите, щракнете двукратно върху файла и той ще се зареди в раздел във вашия браузър. Трябва да видите текущото време, показвано в мрежа от думи.

Забележка: Тествал съм приложението само с Chrome в Windows.

Стъпка 2: Редактирайте мрежата

Можете да изпробвате различни оформления на думи, като редактирате парчето Javascript, което изглежда така:

var row_strs = [„ТОВА е“, „ЕДНО ДВЕ ТРИ“, „ЧЕТИРИ ПЕТ ШЕСТ“, „СЕДЕМ ОСЕМ“, „ДЕВЕТ ДЕСЕТ“, „ЕДНАДЕСЕТ ДВАДНАДЦАТ“, „О, ПЕТИ ДЕСЕТ“, „ПЕТНАДЕСЕТ ДВАДЕСЕТ“, „ОТ ЧАС ТРИДЕСЕТ“, "ЧЕТИРИДЕСЕТ ПЕТДЕСЕТ ПЕТ", "ПОСЛЕДНО", "НА НОЩНА сутрин",];

Ако добавяте/изтривате редове и презареждате страницата, вашата мрежа ще бъде по -голяма или по -малка.

И ако добавите повече букви към всеки ред, вашата мрежа ще стане по -широка. Просто се уверете, че всички редове имат еднакъв брой букви.

Ще забележите, че низовете в горния код имат интервали, но те се превръщат в случайни знаци в мрежата. Можете да изберете набора от знаци, които ще се използват на случаен принцип за запълване на тези пространства, като редактирате реда, който изглежда така:

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

Стъпка 3: Променете формулировката

Ще трябва да знаете как да пишете код, ако искате да използвате различни фрази. Логиката, която взема дата и я превръща в думи, е във функцията, наречена dateToSentence ().