Настраиваемый симулятор Word Clock: 3 шага

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:48

Это не совсем инструкция. Я разрабатываю свои собственные Word Clock и решил сначала создать симулятор веб-приложения, чтобы я мог разложить сетку и проверить, как она выглядит в разное время дня. Затем я понял, что это может быть полезно другим людям, работающим над часами слов, и решил поделиться им.

Приложение представляет собой один короткий HTML-файл. Если вы сохраните его и дважды щелкните по нему, он откроется в вашем браузере и начнет отображать текущее время. Затем он будет обновлять дисплей каждые 10 секунд, если время изменилось.

Также есть текстовое поле, где вы можете ввести любое определенное время и посмотреть, как это будет выглядеть в вашем проекте.

Дизайн часов слов у всех разный, поэтому я попытался упростить настройку кода. См. Следующие несколько шагов, чтобы узнать, как это сделать.

Надеюсь, вы найдете это полезным! Замечательно иметь возможность экспериментировать с макетами и формулировками, прежде чем переходить к оборудованию!

Шаг 1. Загрузите HTML-файл

Симулятор представляет собой однофайловое веб-приложение. Это чуть меньше 200 строк. Вы можете скачать это здесь.

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

После того, как вы загрузили его, дважды щелкните файл, и он загрузится во вкладке в вашем браузере. Вы должны увидеть текущее время, отображаемое в текстовой сетке.

Примечание. Я тестировал приложение только в Chrome в Windows.

Шаг 2: отредактируйте сетку

Вы можете попробовать разные раскладки слов, отредактировав фрагмент Javascript, который выглядит следующим образом:

var row_strs = [«ЭТО ЕСТЬ», «ОДИН ДВА ТРИ», «ЧЕТЫРЕ ПЯТЬ ШЕСТЬ», «СЕМЬ ВОСЕМЬ», «ДЕВЯТЬ ДЕСЯТЬ», «ОДИННАДЦАТЬ ДВЕНАДЦАТЬ», «ОН ПЯТЬ ДЕСЯТЬ», «ПЯТНАДЦАТЬ ДВАДЦАТЬ», «ЧАСЫ ТРИДЦАТЬ», «СОРОК ПЯТЬДЕСЯТ ПЯТЬ», «ДНЕМ», «НОЧЬЮ УТРОМ»,];

Если вы добавляете / удаляете строки и перезагружаете страницу, ваша сетка будет больше или меньше.

А если вы добавите больше букв в каждую строку, ваша сетка станет шире. Просто убедитесь, что во всех строках одинаковое количество букв.

Вы заметите, что строки в приведенном выше коде имеют пробелы, но они превращаются в случайные символы в сетке. Вы можете выбрать набор символов, которые будут случайным образом использоваться для заполнения этих пробелов, отредактировав строку, которая выглядит следующим образом:

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

Шаг 3. Измените формулировку

Вам нужно знать, как писать код, если вы хотите использовать другую формулировку. Логика, которая берет дату и превращает ее в слова, находится в функции, называемой dateToSentence ().