2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-13 06:58
Это не совсем инструкция. Я разрабатываю свои собственные Word Clock и решил сначала создать симулятор веб-приложения, чтобы я мог разложить сетку и проверить, как она выглядит в разное время дня. Затем я понял, что это может быть полезно другим людям, работающим над часами слов, и решил поделиться им.
Приложение представляет собой один короткий HTML-файл. Если вы сохраните его и дважды щелкните по нему, он откроется в вашем браузере и начнет отображать текущее время. Затем он будет обновлять дисплей каждые 10 секунд, если время изменилось.
Также есть текстовое поле, где вы можете ввести любое определенное время и посмотреть, как это будет выглядеть в вашем проекте.
Дизайн часов слов у всех разный, поэтому я попытался упростить настройку кода. См. Следующие несколько шагов, чтобы узнать, как это сделать.
Надеюсь, вы найдете это полезным! Замечательно иметь возможность экспериментировать с макетами и формулировками, прежде чем переходить к оборудованию!
Шаг 1. Загрузите HTML-файл
Симулятор представляет собой однофайловое веб-приложение. Это чуть меньше 200 строк. Вы можете скачать это здесь.
(На самом деле кнопки для загрузки файла на Github нет. Но вы можете просто выбрать содержимое файла, скопировать и вставить в новый текстовый файл на своем компьютере. Обязательно назовите файл something.html.)
После того, как вы загрузили его, дважды щелкните файл, и он загрузится во вкладке в вашем браузере. Вы должны увидеть текущее время, отображаемое в текстовой сетке.
Примечание. Я тестировал приложение только в Chrome в Windows.
Шаг 2: отредактируйте сетку
Вы можете попробовать разные раскладки слов, отредактировав фрагмент Javascript, который выглядит следующим образом:
var row_strs = [«ЭТО ЕСТЬ», «ОДИН ДВА ТРИ», «ЧЕТЫРЕ ПЯТЬ ШЕСТЬ», «СЕМЬ ВОСЕМЬ», «ДЕВЯТЬ ДЕСЯТЬ», «ОДИННАДЦАТЬ ДВЕНАДЦАТЬ», «ОН ПЯТЬ ДЕСЯТЬ», «ПЯТНАДЦАТЬ ДВАДЦАТЬ», «ЧАСЫ ТРИДЦАТЬ», «СОРОК ПЯТЬДЕСЯТ ПЯТЬ», «ДНЕМ», «НОЧЬЮ УТРОМ»,];
Если вы добавляете / удаляете строки и перезагружаете страницу, ваша сетка будет больше или меньше.
А если вы добавите больше букв в каждую строку, ваша сетка станет шире. Просто убедитесь, что во всех строках одинаковое количество букв.
Вы заметите, что строки в приведенном выше коде имеют пробелы, но они превращаются в случайные символы в сетке. Вы можете выбрать набор символов, которые будут случайным образом использоваться для заполнения этих пробелов, отредактировав строку, которая выглядит следующим образом:
var RANDCHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ @ # $% &";
Шаг 3. Измените формулировку
Вам нужно знать, как писать код, если вы хотите использовать другую формулировку. Логика, которая берет дату и превращает ее в слова, находится в функции, называемой dateToSentence ().