一个在线日程管理的web前端设计实例

软件设计开发本栏目责任编辑:谢媛媛
客流统计系统方案
一个在线日程管理的web 前端设计实例
李时颖
(苏州经贸职业技术学院,江苏苏州215009)
摘要:该文论述了设计开发一个在线日程管理的web 小程序设计和开发的过程,以及用javascript 实现点击更改指定位置颜的两种方法。
关键词:web 前端设计;时间管理;javascript ;番茄钟定时器
磨具制造
日程管理中图分类号:TP311文献标识码:A
文章编号:1009-3044(2019)31-0043-02
开放科学(资源服务)标识码(OSID):1概述
本案例设计了一个根据“时间管理四象限理论”和“番茄钟
工作法”来管理日程安排的在线web 小程序。
“时间管理四象限理论”认为应该将所有待办事项罗列出
来,根据紧急、重要程度分出主次,先处理紧急事件和重要事
件,再处理其他事件;“番茄钟工作法”建议人们将25分钟左右
定位一个周期,在这个周期内排除干扰全神贯注的处理一项工
作,从而提高工作效率。
本程序根据以上理论设计了两个主要功能:1)可以根据重要程度选择重要日程通过单击鼠标设置为蓝背景显示;可以根据紧急程度选择紧急日程通过双击鼠标
设置为红背景显示。通过设置不同显示颜从而直观的在
直线导轨滑台
一周日程中分出紧急事件、重要事件和其他事件。2)可以自定义设置以分钟为单位的番茄钟,一个周期结束后会有弹框和闹钟图标出现。
案例运行后效果如图1所示。图1
2开发及重要功能实现过程
1)日程表主体实现的两种方式比较日程表的框架部分可以通过<div>和<span>标签排列获得,代码如图2所示,也可以用表格标签,<table>得到,代码如图3所示。图2原油脱硫剂
批量抓鸡图3从两段代码比较可以看出,使用表格标签<table>制作排列规律的对象非常方便,而第一种通过<div>和<span>标签排列的方法会有很多冗余,具体样式控制起来也会更为困难。同时,两种不同的结构方式也会影响到功能实现的方式。2)日程表设置背景功能的实现日程表最重要的功能是可以通过鼠标单击、双击设置颜。实现这个功能由两个关键点,一个是添加鼠标事件“on⁃click ”和“ondblclick ”;另一个是能够动态的选择到任意一个日程项所在的区域。在第一种html 结构中,由于日程表是通过盒子结构制作的,为了实现所有区域的设置功能,因而在每个,<span>标签中都添加了鼠标单击事件和鼠标双击时间,如图2所示。
收稿日期:2019-09-23
作者简介:李时颖,女,硕士,主要研究方向为数字媒体艺术、公共艺术教育。
43

本文发布于:2024-09-22 01:43:10,感谢您对本站的认可!

本文链接:https://www.17tex.com/tex/4/346221.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:实现   设置   日程   功能   日程表
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议