Configable Word Clock Simulator: 3 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:10

Ito ay hindi eksaktong isang Maituturo. Nagdidisenyo ako ng aking sariling Word Clock, at nagpasyang magtayo muna ng isang web app simulator upang mailatag ko ang grid at subukan kung paano ito tumingin sa iba't ibang oras ng araw. Pagkatapos ay napagtanto kong ito ay maaaring maging kapaki-pakinabang para sa ibang mga tao na nagtatrabaho sa mga orasan ng salita, at nagpasyang ibahagi ito.

Ang app ay isang solong maikling file ng HTML. Kung nai-save mo ito at nag-double click dito, bubuksan ito sa iyong browser, at magsisimulang ipakita ang kasalukuyang oras. Pagkatapos ay ia-update nito ang display bawat 10 segundo kung nagbago ang oras.

Mayroon ding isang patlang ng teksto kung saan maaari kang mag-type sa anumang tukoy na oras at makita kung paano ito magiging hitsura sa iyong proyekto.

Ang disenyo ng orasan ng salita ng bawat isa ay magkakaiba, kaya sinubukan kong gawing madaling pagsasaayos ang code. Tingnan ang susunod na ilang mga hakbang para sa mga pahiwatig sa kung paano ito gawin.

Inaasahan kong nahanap mo itong kapaki-pakinabang! Mahusay na makapag-eksperimento sa mga layout at salita bago gumawa sa hardware!

Hakbang 1: I-download ang HTML File

Ang simulator ay isang solong-file na web app. Nasa ilalim lamang ng 200 linya. Maaari mo itong i-download dito.

(Wala talagang isang pindutan upang mai-download ang file sa Github. Ngunit maaari mo lamang piliin ang mga nilalaman ng file, kopyahin, at i-paste sa isang bagong text file sa iyong computer. Siguraduhing pangalanan ang file ng isang bagay.html.)

Matapos mong ma-download ito, mag-double click sa file at maglo-load ito sa isang tab sa iyong browser. Dapat mong makita ang kasalukuyang oras na ipinapakita sa isang grid ng salita.

Tandaan: Nasubukan ko lang ang app gamit ang Chrome sa Windows.

Hakbang 2: I-edit ang Grid

Maaari mong subukan ang iba't ibang mga layout ng salita sa pamamagitan ng pag-edit ng piraso ng Javascript na ganito:

var row_strs = ["IT IS", "ONE DALAMATLAT", "APAT LIMA SIX", "PITONG Walo", "IKAPITONG PULO", "Labing-pitse Labintatlo", "OH LIMANG IKAPIT", "APATLIMANG LABUYAN", "O'CLOCK THIRTY", "FORTY Fifty FIVE", "IN THE AFTERNOON", "AT NIGHT MORNING",];

Kung magdagdag / magtanggal ng mga hilera at i-reload ang pahina, ang iyong grid ay magiging mas malaki o maliit.

At kung magdagdag ka ng higit pang mga titik sa bawat hilera, magiging mas malawak ang iyong grid. Siguraduhin lamang na ang lahat ng mga hilera ay may parehong bilang ng mga titik.

Mapapansin mo na ang mga string sa code sa itaas ay may puwang, ngunit ang mga iyon ay naging mga random character sa grid. Maaari mong piliin ang hanay ng mga character na sapalarang gagamitin upang punan ang mga puwang sa pamamagitan ng pag-edit ng linya na ganito:

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

Hakbang 3: Baguhin ang Pag-record

Kakailanganin mong malaman kung paano magsulat ng code kung nais mong gumamit ng iba't ibang mga parirala. Ang lohika na tumatagal ng isang petsa at ginawang mga salita ay nasa pagpapaandar na tinatawag na dateToSentence ().