סימולטור שעון מילים הניתן להגדרה: 3 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:12

זה לא בדיוק מדריך. אני מתכנן שעון וורד משלי והחלטתי קודם כל לבנות סימולטור יישומי אינטרנט כדי שאוכל לפרוס את הרשת ולבדוק איך הוא נראה בזמנים שונים של היום. ואז הבנתי שזה יכול להיות שימושי עבור אנשים אחרים שעובדים על שעוני מילים, והחלטתי לשתף אותו.

האפליקציה היא קובץ HTML קצר יחיד. אם תשמור אותו ותלחץ עליו פעמיים, הוא ייפתח בדפדפן שלך ויתחיל להציג את השעה הנוכחית. לאחר מכן הוא יעדכן את התצוגה כל 10 שניות אם הזמן השתנה.

יש גם שדה טקסט שבו תוכל להקליד כל זמן ספציפי ולראות כיצד הוא ייראה בפרויקט שלך.

עיצוב שעון המלים של כולם שונה, אז ניסיתי להגדיר את הקוד בקלות. עיין בשלבים הבאים לקבלת רמזים כיצד לעשות זאת.

אני מקווה שתמצא את זה מועיל! זה נהדר להיות מסוגל להתנסות בפריסות ובניסוח לפני שתתחייב לחומרה!

שלב 1: הורד את קובץ ה- HTML

הסימולטור הוא אפליקציית אינטרנט בקובץ יחיד. זה קצת פחות מ -200 קווים. אתה יכול להוריד אותו כאן.

(אין ממש כפתור להורדת הקובץ ב- Github. אבל אתה יכול פשוט לבחור את תוכן הקובץ, להעתיק ולהדביק אותו בקובץ טקסט חדש במחשב שלך. הקפד לתת שם לקובץ something.html.)

לאחר הורדתו, לחץ פעמיים על הקובץ והוא ייטען בכרטיסייה בדפדפן שלך. אתה אמור לראות את הזמן הנוכחי מוצג ברשת מילים.

הערה: בדקתי את האפליקציה רק באמצעות Chrome ב- Windows.

שלב 2: ערוך את הרשת

אתה יכול לנסות פריסות מילים שונות על ידי עריכת פיסת Javascript שנראית כך:

var row_strs = ["זה", "אחת שתיים שלוש", "ארבע חמש שישה", "שבעת שמונה", "תשע עשרה", "אחת עשרה עשרה", "הו חמש עשרה", "חמש עשרה עשרים", "השעה שלוש עשרה", "FORTY FIFTY FIVE", "בשעות אחר הצהריים", "בלילה בבוקר",];

אם תוסיף/תמחק שורות ותטען מחדש את הדף, הרשת שלך תהיה גדולה יותר או קטנה יותר.

ואם תוסיף יותר אותיות לכל שורה, הרשת שלך תתרחב. רק וודא שלכל השורות יש אותו מספר אותיות.

תבחין כי המחרוזות בקוד לעיל מכילות רווחים, אך אלה הופכות לדמויות אקראיות ברשת. אתה יכול לבחור את קבוצת הדמויות שישמשו באופן אקראי למילוי הרווחים על ידי עריכת השורה שנראית כך:

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

שלב 3: שנה את הניסוח

יהיה עליך לדעת כיצד לכתוב קוד אם אתה רוצה להשתמש בניסוח שונה. ההיגיון שלוקח תאריך והופך אותו למילים נמצא בפונקציה שנקראת dateToSentence ().