Мазмұны:

Конфигурацияланатын Word Clock Simulator: 3 қадам
Конфигурацияланатын Word Clock Simulator: 3 қадам

Бейне: Конфигурацияланатын Word Clock Simulator: 3 қадам

Бейне: Конфигурацияланатын Word Clock Simulator: 3 қадам
Бейне: Супер длинный выпуск о дальнобое по Скандинавии! Последний рейс перед увольнением! 2024, Шілде
Anonim
Конфигурацияланатын Word Clock Simulator
Конфигурацияланатын Word Clock Simulator

Бұл нақты нұсқаулық емес. Мен өзімнің Word Clock дизайнын жасап жатырмын, мен алдымен торапты орналастырып, оның тәуліктің әр мезгілінде қалай көрінетінін тексеру үшін веб -қосымшаның тренажерін құруды шештім. Содан кейін бұл сөз сағаттарында жұмыс істейтін басқа адамдар үшін пайдалы болатынын түсіндім және оны бөлісуді шештім.

Қолданба - бұл қысқа HTML файл. Егер сіз оны сақтап, оны екі рет нұқсаңыз, ол сіздің браузерде ашылады және ағымдағы уақытты көрсете бастайды. Содан кейін, егер уақыт өзгерсе, дисплей әр 10 секунд сайын жаңартылып отырады.

Сондай -ақ, мәтіндік өріс бар, онда сіз кез келген уақытта тере аласыз және оның сіздің жобаңызда қалай көрінетінін көре аласыз.

Әркімнің сағаттарының дизайны әр түрлі, сондықтан мен кодты оңай конфигурациялауға тырыстым. Мұны қалай жасау керектігін білу үшін келесі қадамдарды қараңыз.

Сізге бұл пайдалы деп ойлаймын! Жабдыққа кіріспес бұрын макеттермен және сөзбен тәжірибе жасай білу керемет!

1 -қадам: HTML файлын жүктеңіз

Тренажер-бұл бір файлды веб-қосымша. Бұл 200 жолдан аз ғана. Сіз оны мына жерден жүктей аласыз.

(Файлды Github -те жүктеудің батырмасы жоқ. Бірақ сіз файлдың мазмұнын таңдап, көшіріп, компьютердегі жаңа мәтіндік файлға қоюға болады. Файлға міндетті түрде атау беріңіз.html.)

Сіз оны жүктегеннен кейін файлды екі рет нұқыңыз, ол сіздің шолғышыңыздағы қойындыға жүктеледі. Сіз ағымдағы уақытты сөз торында көрсетілетінін көруіңіз керек.

Ескерту: Мен Windows -та Chrome -ды қолдана отырып, қосымшаны тексердім.

2 -қадам: торды өңдеңіз

Сіз JavaScript -ті өңдеу арқылы әр түрлі сөздердің орналасуын сынап көре аласыз:

var row_strs = [«БҰЛ», «БІР ЕКІ ҮШ», «ТӨРТ БЕС АЛТЫ», «ЖЕТІ СЕКІЗ», «ТОҒЫЗ ТОҢ», «ОН БІРІНШІ», «ОХ БЕС ОН», «ОН БЕСІН ЖІРІМ», «ОН ОТЗ» «, «Қырық елу бес», «түстен кейін», «түнде»,];

Егер сіз жолдарды қоссаңыз/жойсаңыз және бетті қайта жүктесеңіз, сіздің торыңыз үлкенірек немесе кішірек болады.

Егер сіз әр жолға көбірек әріп қоссаңыз, сіздің торыңыз кеңейеді. Барлық жолдардың әріптер саны бірдей екеніне көз жеткізіңіз.

Сіз жоғарыдағы кодтағы жолдарда бос орын бар екенін байқайсыз, бірақ олар тордағы кездейсоқ таңбаларға айналады. Сіз келесідей жолды өңдеу арқылы бос орындарды толтыру үшін кездейсоқ қолданылатын таңбалар жиынтығын таңдай аласыз:

var RANDCHARS = «ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%&»;

3 -қадам: сөзді өзгерту

Егер сіз әр түрлі фразаларды қолданғыңыз келсе, кодты қалай жазу керектігін білуіңіз керек. Датаны алып, оны сөзге айналдыратын логика dateToSentence () функциясында.

Ұсынылған: