โปรแกรมจำลองนาฬิกาคำที่กำหนดค่าได้: 3 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03

นี่ไม่ใช่สิ่งที่สอนได้อย่างแน่นอน ฉันกำลังออกแบบ Word Clock ของตัวเอง และตัดสินใจสร้างโปรแกรมจำลองเว็บแอปก่อน เพื่อที่ฉันจะได้จัดวางตารางและทดสอบรูปลักษณ์ในช่วงเวลาต่างๆ ของวัน จากนั้นฉันก็รู้ว่าสิ่งนี้อาจมีประโยชน์สำหรับคนอื่นๆ ที่ทำงานเกี่ยวกับนาฬิกาคำศัพท์ และตัดสินใจแบ่งปัน

แอปนี้เป็นไฟล์ HTML สั้นๆ ไฟล์เดียว หากคุณบันทึกและดับเบิลคลิกที่ไฟล์ เบราว์เซอร์จะเปิดขึ้นในเบราว์เซอร์ของคุณ และเริ่มแสดงเวลาปัจจุบัน จากนั้นจะอัปเดตการแสดงผลทุกๆ 10 วินาทีหากเวลาเปลี่ยนไป

นอกจากนี้ยังมีช่องข้อความที่คุณสามารถพิมพ์ในเวลาที่ต้องการและดูว่าจะมีลักษณะอย่างไรในโครงการของคุณ

การออกแบบนาฬิกาคำศัพท์ของทุกคนแตกต่างกัน ดังนั้นฉันจึงพยายามกำหนดค่าโค้ดอย่างง่าย ดูขั้นตอนถัดไปสำหรับคำแนะนำเกี่ยวกับวิธีการทำเช่นนั้น

ฉันหวังว่าคุณจะพบว่าสิ่งนี้มีประโยชน์! เป็นการดีที่จะได้ทดลองกับเลย์เอาต์และถ้อยคำก่อนเริ่มใช้งานฮาร์ดแวร์!

ขั้นตอนที่ 1: ดาวน์โหลดไฟล์ HTML

โปรแกรมจำลองเป็นเว็บแอปไฟล์เดียว มีไม่ถึง 200 เส้น คุณสามารถดาวน์โหลดได้ที่นี่

(ไม่มีปุ่มสำหรับดาวน์โหลดไฟล์บน Github จริงๆ แต่คุณสามารถเลือกเนื้อหาไฟล์ คัดลอก และวางลงในไฟล์ข้อความใหม่บนคอมพิวเตอร์ของคุณ อย่าลืมตั้งชื่อไฟล์ว่า something.html)

หลังจากที่คุณดาวน์โหลดแล้ว ให้ดับเบิลคลิกที่ไฟล์ จากนั้นไฟล์จะโหลดในแท็บในเบราว์เซอร์ของคุณ คุณควรเห็นเวลาปัจจุบันที่แสดงในตารางคำ

หมายเหตุ: ฉันได้ทดสอบแอปโดยใช้ Chrome บน Windows เท่านั้น

ขั้นตอนที่ 2: แก้ไข Grid

คุณสามารถลองใช้รูปแบบคำต่างๆ ได้โดยแก้ไขส่วนของ Javascript ที่มีลักษณะดังนี้:

var row_strs = [" IT IS "," ONE TWO THREE "," FOUR FIVE SIX ", " SEVEN EIGHT "," NINE TEN ", " ELEVEN TWELVE", " OH FIVE TEN ", " FIFTEEN TENTY ", " O'CLOCK THIRTY ", " สี่สิบห้าสิบห้า ", "ในตอนบ่าย", " ตอนกลางคืน",];

หากคุณเพิ่ม/ลบแถวและโหลดหน้าซ้ำ ตารางของคุณจะใหญ่ขึ้นหรือเล็กลง

และหากคุณเพิ่มตัวอักษรในแต่ละแถว ตารางของคุณจะกว้างขึ้น เพียงตรวจสอบให้แน่ใจว่าแถวทั้งหมดมีจำนวนตัวอักษรเท่ากัน

คุณจะสังเกตเห็นว่าสตริงในโค้ดด้านบนมีช่องว่าง แต่สตริงเหล่านั้นจะเปลี่ยนเป็นอักขระแบบสุ่มในกริด คุณสามารถเลือกชุดอักขระที่จะสุ่มใช้เพื่อเติมช่องว่างเหล่านั้นโดยแก้ไขบรรทัดที่มีลักษณะดังนี้:

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

ขั้นตอนที่ 3: เปลี่ยนถ้อยคำ

คุณจะต้องรู้วิธีเขียนโค้ดหากต้องการใช้ถ้อยคำที่ต่างกัน ตรรกะที่ใช้วันที่และเปลี่ยนเป็นคำนั้นอยู่ในฟังก์ชันที่เรียกว่า dateToSentence()