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

李時穎

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A

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

1概述

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

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

本程序根據(jù)以上理論設(shè)計了兩個主要功能：

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

2）可以自定義設(shè)置以分鐘為單位的番茄鐘，一個周期結(jié)束后會有彈框和鬧鐘圖標(biāo)出現(xiàn)。

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

2開發(fā)及重要功能實現(xiàn)過程

1）日程表主體實現(xiàn)的兩種方式比較

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

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

從兩段代碼比較可以看出，使用表格標(biāo)簽

制作排列規(guī)律的對象非常方便，而第一種通過和標(biāo)簽排列的方法會有很多冗余，具體樣式控制起來也會更為困難。同時，兩種不同的結(jié)構(gòu)方式也會影響到功能實現(xiàn)的方式。

2）日程表設(shè)置背景色功能的實現(xiàn)

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

第二種html結(jié)構(gòu)中，由于使用了表格標(biāo)簽

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

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

3）番茄鐘功能的實現(xiàn)

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

4）彈出鬧鐘小圖標(biāo)的實現(xiàn)

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

[通聯(lián)編輯：代影]