一個在線日程管理的Web前端設計實例

李時穎

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2019）31-0043-02

1概述

本案例設計了一個根據“時間管理四象限理論”和“番茄鐘工作法”來管理日程安排的在線web小程序。

“時間管理四象限理論”認為應該將所有待辦事項羅列出來，根據緊急、重要程度分出主次，先處理緊急事件和重要事件，再處理其他事件;“番茄鐘工作法”建議人們將25分鐘左右定位一個周期，在這個周期內排除干擾全神貫注的處理一項工作，從而提高工作效率。

本程序根據以上理論設計了兩個主要功能：

1）可以根據重要程度選擇重要日程通過單擊鼠標設置為藍色背景顯示;可以根據緊急程度選擇緊急日程通過雙擊鼠標設置為紅色背景顯示。通過設置不同顯示顏色從而直觀的在一周日程中分出緊急事件、重要事件和其他事件。

2）可以自定義設置以分鐘為單位的番茄鐘，一個周期結束后會有彈框和鬧鐘圖標出現。

案例運行后效果如圖1所示。

2開發及重要功能實現過程

1）日程表主體實現的兩種方式比較

日程表的框架部分可以通過

和標簽排列獲得，代碼如圖2所示，也可以用表格標簽，得到，代碼如圖3所示。

從兩段代碼比較可以看出，使用表格標簽

制作排列規律的對象非常方便，而第一種通過和標簽排列的方法會有很多冗余，具體樣式控制起來也會更為困難。同時，兩種不同的結構方式也會影響到功能實現的方式。

2）日程表設置背景色功能的實現

日程表最重要的功能是可以通過鼠標單擊、雙擊設置顏色。實現這個功能由兩個關鍵點，一個是添加鼠標事件"Oil-click”和“ondblclick”;另一個是能夠動態的選擇到任意一個日程項所在的區域。在第一種html結構中，由于日程表是通過盒子結構制作的，為了實現所有區域的設置功能，因而在每個，標簽中都添加了鼠標單擊事件和鼠標雙擊時間，如圖2所示。

第二種html結構中，由于使用了表格標簽

，借助表格本身的行、單元格屬性，將表格作為一個二維數組，通過forin語句遍歷二維數組中所有單元格，得到一個動態的單元格變量cell啪，在這個變量上添加鼠標事件，從而實現動態選擇功能。如圖4所示。

比較兩種代碼結構，可以看出第二種方法用函數實現相關功能代碼更為簡潔，同時更有利于實現結構與交互的分離。并且在這種方法中，由于設置了ifelse語句判斷，可以方便的實現單擊設置指定顏色，再次單擊取消設置的功能，從而實現了設置錯誤后快速取消設置的功能，優化了程序使用體驗。需要注意的時，由于實現所有區域能夠動態的實現選擇，兩種方法都使用了“this”函數。

3）番茄鐘功能的實現

番茄鐘的功能主要通過定時器實現，通過函數變量獲取輸入框中設置的分鐘數值，作為定時器的參數值，需要注意的是由于定時器默認單位是微秒，需要將輸人框中輸人的數值核算成為微秒，并且輸入框text的type值應當設置為“number”。如圖5所示。

4）彈出鬧鐘小圖標的實現

鬧鐘小圖標的彈出使用了創建一個元素節點的方法，創建一個變量作為新的元素節點，然后再將圖片地址、style屬性值賦值給變量，從而控制圖形的位置、大小等屬性。如圖5中函數“function xnz（）”所示。

[通聯編輯：代影]