Trình mô phỏng đồng hồ từ có thể cấu hình: 3 bước

2025 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2025-01-23 15:14

Đây chính xác không phải là một bài giảng có thể hướng dẫn. Tôi đang thiết kế Đồng hồ từ của riêng mình và quyết định đầu tiên xây dựng một trình mô phỏng ứng dụng web để tôi có thể bố trí lưới và kiểm tra xem nó trông như thế nào vào các thời điểm khác nhau trong ngày. Sau đó, tôi nhận ra điều này có thể hữu ích cho những người khác đang làm việc trên đồng hồ từ và quyết định chia sẻ nó.

Ứng dụng là một tệp HTML ngắn duy nhất. Nếu bạn lưu nó và nhấp đúp vào nó, nó sẽ mở trong trình duyệt của bạn và bắt đầu hiển thị thời gian hiện tại. Sau đó, nó sẽ cập nhật màn hình sau mỗi 10 giây nếu thời gian đã thay đổi.

Ngoài ra còn có một trường văn bản nơi bạn có thể nhập vào bất kỳ thời gian cụ thể nào và xem nó sẽ trông như thế nào trong dự án của bạn.

Thiết kế đồng hồ từ của mọi người là khác nhau, vì vậy tôi đã cố gắng tạo mã dễ dàng cấu hình. Xem vài bước tiếp theo để biết các gợi ý về cách thực hiện điều đó.

Tôi hy vọng bạn tìm thấy điều này hữu ích! Thật tuyệt khi có thể thử nghiệm với bố cục và từ ngữ trước khi cam kết với phần cứng!

Bước 1: Tải xuống tệp HTML

Trình mô phỏng là một ứng dụng web một tệp. Nó chỉ dưới 200 dòng. Bạn có thể tải về tại đây.

(Không thực sự có nút để tải tệp xuống trên Github. Nhưng bạn chỉ có thể chọn nội dung tệp, sao chép và dán vào tệp văn bản mới trên máy tính của mình. Hãy nhớ đặt tên tệp là something.html.)

Sau khi bạn đã tải xuống, hãy nhấp đúp vào tệp và nó sẽ tải trong một tab trong trình duyệt của bạn. Bạn sẽ thấy thời gian hiện tại được hiển thị trong một lưới từ.

Lưu ý: Tôi chỉ thử nghiệm ứng dụng bằng Chrome trên Windows.

Bước 2: Chỉnh sửa lưới

Bạn có thể thử các bố cục từ khác nhau bằng cách chỉnh sửa đoạn Javascript trông giống như sau:

var row_strs = ["LÀ", "MỘT HAI BA", "BỐN NĂM SÁU", "BẢY TÁM", "NINE TEN", "ELEVEN TWELVE", "OH FIVE TEN", "FIFTEEN TWENTY", "O'CLOCK THIRTY", "NĂM VÔ CÙNG BẤT NGỜ", "VÀO CHIỀU", "SÁNG ĐÊM",];

Nếu bạn thêm / xóa hàng và tải lại trang, lưới của bạn sẽ lớn hơn hoặc nhỏ hơn.

Và nếu bạn thêm nhiều chữ cái vào mỗi hàng, lưới của bạn sẽ rộng hơn. Chỉ cần đảm bảo rằng tất cả các hàng có cùng số chữ cái.

Bạn sẽ nhận thấy rằng các chuỗi trong đoạn mã trên có khoảng trắng, nhưng những chuỗi đó sẽ được chuyển thành các ký tự ngẫu nhiên trong lưới. Bạn có thể chọn tập hợp các ký tự sẽ được sử dụng ngẫu nhiên để lấp đầy các khoảng trống đó bằng cách chỉnh sửa dòng trông giống như sau:

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

Bước 3: Thay đổi cách ghi

Bạn sẽ cần biết cách viết mã nếu bạn muốn sử dụng các cụm từ khác nhau. Logic lấy ngày và biến nó thành từ nằm trong hàm có tên dateToSentence ().