摘要：该文论述了设计开发一个在线日程管理的web小程序设计和开发的过程，以及用javascript实现点击更改指定位置颜色的两种方法。
　　关键词：web前端设计;时间管理;javascript;番茄钟定时器
　　中图分类号：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（）”所示。
　　[通联编辑：代影]