web实践小项目<一>:简单日程管理系统(涉及html/css,javascript,python,sql,日期处理)...

暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统。借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进行整理,希望能给其他初学者提供参考,也希望有大神在浏览我粗糙的开发过程中能指出一些意见或建议。

(阅读以下内容需要有一定的html/css,javascript,python和sql基础,and谢谢阅读!)

注:实践中的环境为ubuntu 14.04操作系统,python3.4(2.7实测也可行),firefox30.0

一、简单日程系统简介

先上一张界面的清爽截图(请原谅理工男的布局和配色审美...)

各个分区的功能应该比较明显,左下的文本域用于显示和修改被选中日期当天的日程安排。日历中对于今天的日期突出字体颜色显示,对当天有日程安排的日期突出背景色显示,对月历中非本月的部分进行虚化显示。同时每个月份的日历是动态生成的,所以上述系统可以显示任意年份月份的日历。

同时鼠标在日历上移动时有跟随格背景色突出功能

选取某一日期时跟随格颜色跳变产生按钮视觉效果,同时下方的修改按钮解锁。

在文本域中输入日程后点击修改,会同步更新服务器端的数据库,页面中的日历和右侧的“最近14天内日程”提醒框。同时通过javascript的ajax实现页面的局部更新而不必产生页面刷新跳转。

修改时会自动判断是创建一条新的日程安排存档(以一天为单位)还是删除(如果文本框为空)抑或是更新。

二、开发过程:

从界面布局开始思考不知道这科学不,特别最后那个14天内日程提醒还是因为最后发现右边太空了的产物=  =||

然后功能上的初步设想就是实现一个hold住任意年份月份的日历日程系统,同时提供对日程的增、删、修改功能(恩,就是一个日程系统的基本功能),其它具体的视觉效果什么的都是边编码边想到补充的(不知道正确的开发方式和这差别多大求指教)。

前端

首先搞定了前端的大部分代码(包括html/css和javascript的部分),这里只列举一些个人觉得有点意义的要点和处理思路,包括一些错误 > <

1.日历的动态生成:

A.页面中的日历(使用<table>)

<table id="calendar">
<tr class="weekday">
<td class="head">星期日</td>
<td class="head">星期一</td>
<td class="head">星期二</td>
<td class="head">星期三</td>
<td class="head">星期四</td>
<td class="head">星期五</td>
<td class="head">星期六</td>
</tr>
<tr class="day">
<td id="begin">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="day">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="day">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<<
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值