81,090
社区成员
发帖
与我相关
我的任务
分享
//关闭新建任务box
function closeAddBox() {
$("#addBox").slideUp();
}
//打开编辑任务box
function editTask(src) {
$("#taskId").val(src.id.substr(4)); //对任务编号隐藏域赋值
$("#editTaskInfo").val(src.innerHTML); //设置编辑内容
var left = getLeft(src) + 15; //设置左边距
var top = getTop(src) + 15; //设置顶边距
$("#editBox").left(left).top(top).slideDown(); //显示编辑任务box
}
//删除任务
function delTask() {
var taskId = $("#taskId").val(); //获取任务编号
$.post("calendar.jsp", //服务器页面地址
{
action: "delTask", //action参数
taskId: taskId //任务编号参数
},
function() { //回调函数
$("#task" + taskId).remove(); //在页面删除任务节点
closeEditBox(); //关闭编辑box
}
);
}
//关闭编辑box
function closeEditBox() {
$("#editBox").slideUp();
}
//更新任务信息
function updateTask() {
var taskId = $("#taskId").val(); //任务编号
var taskInfo = $("#editTaskInfo").val(); //任务内容
//检查任务信息是否为空
if ($.trim(taskInfo)=="") {
alert("请输入任务信息。");
} else {
$.post("calendar.jsp", //服务器页面地址
{
action: "updateTask", //action参数
taskId: taskId, //年月参数
taskInfo: taskInfo //任务信息参数
},
function() { //回调函数
$("#task" + taskId).html(taskInfo); //更新页面任务内容
closeEditBox(); //关闭编辑box
}
);
}
}
//返回对象对页面左边距
function getLeft(src){
var obj = src;
var objLeft = obj.offsetLeft;
while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){
objLeft += obj.offsetParent.offsetLeft;
obj = obj.offsetParent;
}
return objLeft;
}
//返回对象对页面上边距
function getTop(src){
var obj = src;
var objTop = obj.offsetTop;
while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){
objTop += obj.offsetParent.offsetTop;
obj = obj.offsetParent;
}
return objTop;
}
</script>
</head>
<body>
<h1>日程表</h1>
<!-- 新建任务box -->
<div id="addBox">
<div id="taskDate"></div>
内容:<input type="text" id="taskInfo" size="40">
<div class="taskBtn">
<input type="button" value="创建新任务" onClick="addTask()">
<input type="button" value="取消" onClick="closeAddBox()">
</div>
</div>
<!-- 编辑任务box -->
<div id="editBox">
<input type="hidden" id="taskId">
内容:<input type="text" id="editTaskInfo" size="40">
<div class="taskBtn">
<input type="button" value="更新任务信息" onClick="updateTask()">
<input type="button" value="删除该任务" onClick="delTask()">
<input type="button" value="取消" onClick="closeEditBox()">
</div>
</div>
<!-- 日历表格 -->
<table id="calTable">
<tr>
<td colspan="7">
<input type="button" value="上月" onClick="prevMonth()">
<input type="button" value="本月" onClick="thisMonth()">
<input type="button" value="下月" onClick="nextMonth()">
<span id="dateInfo"></span>
</td>
</tr>
<tr>
<td class="day">周日</td>
<td class="day">周一</td>
<td class="day">周二</td>
<td class="day">周三</td>
<td class="day">周四</td>
<td class="day">周五</td>
<td class="day">周六</td>
</tr>
<tr>
<td class="calBox sun" id="calBox0"></td>
<td class="calBox" id="calBox1"></td>
<td class="calBox" id="calBox2"></td>
<td class="calBox" id="calBox3"></td>
<td class="calBox" id="calBox4"></td>
<td class="calBox" id="calBox5"></td>
<td class="calBox sat" id="calBox6"></td>
</tr>
<tr>
<td class="calBox sun" id="calBox7"></td>
<td class="calBox" id="calBox8"></td>
<td class="calBox" id="calBox9"></td>
<td class="calBox" id="calBox10"></td>
<td class="calBox" id="calBox11"></td>
<td class="calBox" id="calBox12"></td>
<td class="calBox sat" id="calBox13"></td>
</tr>
<tr>
<td class="calBox sun" id="calBox14"></td>
<td class="calBox" id="calBox15"></td>
<td class="calBox" id="calBox16"></td>
<td class="calBox" id="calBox17"></td>
<td class="calBox" id="calBox18"></td>
<td class="calBox" id="calBox19"></td>
<td class="calBox sat" id="calBox20"></td>
</tr>
<tr>
<td class="calBox sun" id="calBox21"></td>
<td class="calBox" id="calBox22"></td>
<td class="calBox" id="calBox23"></td>
<td class="calBox" id="calBox24"></td>
<td class="calBox" id="calBox25"></td>
<td class="calBox" id="calBox26"></td>
<td class="calBox sat" id="calBox27"></td>
</tr>
<tr>
<td class="calBox sun" id="calBox28"></td>
<td class="calBox" id="calBox29"></td>
<td class="calBox" id="calBox30"></td>
<td class="calBox" id="calBox31"></td>
<td class="calBox" id="calBox32"></td>
<td class="calBox" id="calBox33"></td>
<td class="calBox sat" id="calBox34"></td>
</tr>
<tr>
<td class="calBox sun" id="calBox35"></td>
<td class="calBox" id="calBox36"></td>
<td class="calBox" id="calBox37"></td>
<td class="calBox" id="calBox38"></td>
<td class="calBox" id="calBox39"></td>
<td class="calBox" id="calBox40"></td>
<td class="calBox sat" id="calBox41"></td>
</tr>
</table>
</body>
</html>
calendar.html
[code=HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>日程表</title>
<style type="text/css">
/* 页面基本样式 */
body, td, input {
font-family:Arial;
font-size:12px;
}
/* 日程表格样式 */
#calTable {
border-collapse:collapse;
border:5px solid #C3D9FF;
}
/* 每日单元格样式 */
td.calBox {
border:1px solid #CCDDEE;
width:100px;
height:80px;
vertical-align:top;
}
/* 每日单元格内日期样式 */
td.calBox div.date {
background:#E8EEF7;
font-size:11px;
padding:2px;
cursor:pointer;
}
/* 每日单元格内周六周日样式 */
td.sat div.date, td.sun div.date{
color:red;
}
/* 今日样式 */
td.calBox div.today {
background:#BBCCDD;
}
/* 周标识样式 */
td.day {
text-align:center;
background:#C3D9FF;
border:1px solid #CCDDEE;
color:#112ABB;
}
/* 当前显示的年月样式 */
#dateInfo {
font-weight:bold;
margin:3px;
}
/* 添加任务div样式 */
#addBox {
display:none;
position:absolute;
width:300px;
border:1px solid #000;
height:100px;
background:#FFFF99;
padding:10px;
}
/* 添加任务内日期样式 */
#taskDate {
height:30px;
font-weight:bold;
padding:3px;
}
/* 按钮样式 */
.taskBtn {
margin:10px;
}
/* 编辑任务div样式 */
#editBox {
display:none;
position:absolute;
width:300px;
border:1px solid #000;
height:60px;
background:#99FF99;
padding:10px;
}
/* 任务样式 */
div.task {
width:98px;
overflow:hidden;
white-space:nowrap;
background:#668CB3;
border:1px solid #FFF;
color:#FFF;
padding:1 2 1 3;
cursor:pointer;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //每月天数
var today = new Today(); //今日对象
var year = today.year; //当前显示的年份
var month = today.month; //当前显示的月份
//页面加载完毕后执行fillBox函数
$(function() {
fillBox();
});
//今日对象
function Today() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
//根据当前年月填充每日单元格
function fillBox() {
updateDateInfo(); //更新年月提示
$("td.calBox").empty(); //清空每日单元格
var dayCounter = 1; //设置天数计数器并初始化为1
var cal = new Date(year, month, 1); //以当前年月第一天为参数创建日期对象
var startDay = cal.getDay(); //计算填充开始位置
//计算填充结束位置
var endDay = startDay + getDays(cal.getMonth(), cal.getFullYear()) - 1;
//如果显示的是今日所在月份的日程,设置day变量为今日日期
var day = -1;
if (today.year == year && today.month == month) {
day = today.day;
}
//从startDay开始到endDay结束,在每日单元格内填入日期信息
for (var i=startDay; i<=endDay; i++) {
if (dayCounter==day) {
$("#calBox" + i).html("<div class='date today' id='" + year + "-" + (month + 1) + "-" + dayCounter + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
} else {
$("#calBox" + i).html("<div class='date' id='" + year + "-" + (month + 1) + "-" + dayCounter + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
}
dayCounter++;
}
getTasks(); //从服务器获取任务信息
}
//从服务器获取任务信息
function getTasks() {
$.getJSON("calendar.jsp", //服务器页面地址
{
action: "getTasks", //action参数
month: year + "-" + (month + 1) //年月参数
},
function(json) { //回调函数
//遍历JSON数组,建立任务信息
$(json).each(function(i){
buildTask(json[i].builddate, json[i].id, json[i].task);
});
}
);
}
//根据日期、任务编号、任务内容在页面上创建任务节点
function buildTask(buildDate, taskId, taskInfo) {
$("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'>" + taskInfo + "</div>");
}
//判断是否闰年返回每月天数
function getDays(month, year) {
if (1 == month) {
if (((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400)) {
return 29;
} else {
return 28;
}
} else {
return daysInMonth[month];
}
}
//显示上月日程
function prevMonth() {
if ((month - 1) < 0) {
month = 11;
year--;
} else {
month--;
}
fillBox(); //填充每日单元格
}
//显示下月日程
function nextMonth() {
if((month + 1) > 11) {
month = 0;
year++;
} else {
month++;
}
fillBox(); //填充每日单元格
}
//显示本月日程
function thisMonth() {
year = today.year;
month = today.month;
fillBox(); //填充每日单元格
}
//更新年月提示
function updateDateInfo() {
$("#dateInfo").html(year + "年" + (month + 1) + "月");
}
//打开新建任务box
function openAddBox(src) {
$("#taskDate").html(src.id); //设置新建日期
$("#taskInfo").val(""); //初始化新建任务内容
var left = getLeft(src) + 15; //设置左边距
var top = getTop(src) + 15; //设置顶边距
$("#addBox").left(left).top(top).slideDown(); //显示新建任务box
}
//向服务器提交新任务信息
function addTask() {
var taskInfo = $("#taskInfo").val(); //获取任务信息
//检查任务信息是否为空
if ($.trim(taskInfo)=="") {
alert("请输入任务信息。");
} else {
var buildDate = $("#taskDate").html(); //获取任务日期
$.post("calendar.jsp", //服务器页面地址
{
action: "addTask", //action参数
taskInfo: taskInfo, //任务信息参数
buildDate: buildDate //任务日期参数
},
function(taskId) { //回调函数
buildTask(buildDate, taskId, taskInfo); //建立任务节点
closeAddBox(); //关闭新建任务box
}
);
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>日程表</title>
<style type="text/css">
/* 页面基本样式 */
body, td, input {
font-family:Arial;
font-size:12px;
}
/* 日程表格样式 */
#calTable {
border-collapse:collapse;
border:5px solid #C3D9FF;
}
/* 每日单元格样式 */
td.calBox {
border:1px solid #CCDDEE;
width:100px;
height:80px;
vertical-align:top;
}
/* 每日单元格内日期样式 */
td.calBox div.date {
background:#E8EEF7;
font-size:11px;
padding:2px;
cursor:pointer;
}
/* 每日单元格内周六周日样式 */
td.sat div.date, td.sun div.date{
color:red;
}
/* 今日样式 */
td.calBox div.today {
background:#BBCCDD;
}
/* 周标识样式 */
td.day {
text-align:center;
background:#C3D9FF;
border:1px solid #CCDDEE;
color:#112ABB;
}
/* 当前显示的年月样式 */
#dateInfo {
font-weight:bold;
margin:3px;
}
/* 添加任务div样式 */
#addBox {
display:none;
position:absolute;
width:300px;
border:1px solid #000;
height:100px;
background:#FFFF99;
padding:10px;
}
/* 添加任务内日期样式 */
#taskDate {
height:30px;
font-weight:bold;
padding:3px;
}
/* 按钮样式 */
.taskBtn {
margin:10px;
}
/* 编辑任务div样式 */
#editBox {
display:none;
position:absolute;
width:300px;
border:1px solid #000;
height:60px;
background:#99FF99;
padding:10px;
}
/* 任务样式 */
div.task {
width:98px;
overflow:hidden;
white-space:nowrap;
background:#668CB3;
border:1px solid #FFF;
color:#FFF;
padding:1 2 1 3;
cursor:pointer;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //每月天数
var today = new Today(); //今日对象
var year = today.year; //当前显示的年份
var month = today.month; //当前显示的月份
//页面加载完毕后执行fillBox函数
$(function() {
fillBox();
});
//今日对象
function Today() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
//根据当前年月填充每日单元格
function fillBox() {
updateDateInfo(); //更新年月提示
$("td.calBox").empty(); //清空每日单元格
var dayCounter = 1; //设置天数计数器并初始化为1
var cal = new Date(year, month, 1); //以当前年月第一天为参数创建日期对象
var startDay = cal.getDay(); //计算填充开始位置
//计算填充结束位置
var endDay = startDay + getDays(cal.getMonth(), cal.getFullYear()) - 1;
//如果显示的是今日所在月份的日程,设置day变量为今日日期
var day = -1;
if (today.year == year && today.month == month) {
day = today.day;
}
//从startDay开始到endDay结束,在每日单元格内填入日期信息
for (var i=startDay; i<=endDay; i++) {
if (dayCounter==day) {
$("#calBox" + i).html("<div class='date today' id='" + year + "-" + (month + 1) + "-" + dayCounter + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
} else {
$("#calBox" + i).html("<div class='date' id='" + year + "-" + (month + 1) + "-" + dayCounter + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
}
dayCounter++;
}
getTasks(); //从服务器获取任务信息
}
//从服务器获取任务信息
function getTasks() {
$.getJSON("calendar.jsp", //服务器页面地址
{
action: "getTasks", //action参数
month: year + "-" + (month + 1) //年月参数
},
function(json) { //回调函数
//遍历JSON数组,建立任务信息
$(json).each(function(i){
buildTask(json[i].builddate, json[i].id, json[i].task);
});
}
);
}
//根据日期、任务编号、任务内容在页面上创建任务节点
function buildTask(buildDate, taskId, taskInfo) {
$("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'>" + taskInfo + "</div>");
}
//判断是否闰年返回每月天数
function getDays(month, year) {
if (1 == month) {
if (((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400)) {
return 29;
} else {
return 28;
}
} else {
return daysInMonth[month];
}
}
//显示上月日程
function prevMonth() {
if ((month - 1) < 0) {
month = 11;
year--;
} else {
month--;
}
fillBox(); //填充每日单元格
}
//显示下月日程
function nextMonth() {
if((month + 1) > 11) {
month = 0;
year++;
} else {
month++;
}
fillBox(); //填充每日单元格
}
//显示本月日程
function thisMonth() {
year = today.year;
month = today.month;
fillBox(); //填充每日单元格
}
//更新年月提示
function updateDateInfo() {
$("#dateInfo").html(year + "年" + (month + 1) + "月");
}
//打开新建任务box
function openAddBox(src) {
$("#taskDate").html(src.id); //设置新建日期
$("#taskInfo").val(""); //初始化新建任务内容
var left = getLeft(src) + 15; //设置左边距
var top = getTop(src) + 15; //设置顶边距
$("#addBox").left(left).top(top).slideDown(); //显示新建任务box
}
//向服务器提交新任务信息
function addTask() {
var taskInfo = $("#taskInfo").val(); //获取任务信息
//检查任务信息是否为空
if ($.trim(taskInfo)=="") {
alert("请输入任务信息。");
} else {
var buildDate = $("#taskDate").html(); //获取任务日期
$.post("calendar.jsp", //服务器页面地址
{
action: "addTask", //action参数
taskInfo: taskInfo, //任务信息参数
buildDate: buildDate //任务日期参数
},
function(taskId) { //回调函数
buildTask(buildDate, taskId, taskInfo); //建立任务节点
closeAddBox(); //关闭新建任务box
}
);
}
}
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,ajax.db.DBUtils,org.json.simple.JSONObject,org.json.simple.JSONArray"%>
<%!
//获取目标月份任务信息
String getTasks(String month) {
JSONArray array = new JSONArray(); //新建JSON数组对象
String sql = "select id, task, builddate from schedule where builddate like ? order by id asc"; //定义SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
ResultSet rs = null; //声明ResultSet对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
pstmt.setString(1, month + "-%"); //设置参数
rs = pstmt.executeQuery();
while (rs.next()) {
//使用数据库结果集生成JSON对象,并加入到JSON数组中
JSONObject obj = new JSONObject();
obj.put("id", rs.getString(1));
obj.put("task", rs.getString(2));
obj.put("builddate", rs.getString(3));
array.add(obj);
}
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(rs); //关闭结果集
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
return array.toString();
}
//添加新任务
int addTask(String taskInfo, String buildDate) {
int newId = -1; //用于保存新任务编号
String sql = "insert into schedule(task, builddate) values(?,?)"; //定义插入数据的SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
ResultSet rs = null; //声明ResultSet对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
pstmt.setString(1, taskInfo); //设置参数
pstmt.setString(2, buildDate); //设置参数
pstmt.executeUpdate();
pstmt.close();
//获取刚插入数据的新id
pstmt = conn.prepareStatement("select last_insert_id()");
rs = pstmt.executeQuery();
if (rs.next()) {
newId = rs.getInt(1); //获取新id
}
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(rs); //关闭结果集
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
return newId;
}
//删除任务
void delTask(String taskId) {
String sql = "delete from schedule where id = ?"; //定义SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
pstmt.setString(1, taskId); //设置参数
pstmt.executeUpdate();
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
}
//更新任务
void updateTask(String taskId, String taskInfo) {
String sql = "update schedule set task = ? where id = ?"; //定义SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
pstmt.setString(1, taskInfo); //设置参数
pstmt.setString(2, taskId); //设置参数
pstmt.executeUpdate();
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
}
%>
<%
out.clear(); //清空当前的输出内容(空格和换行符)
request.setCharacterEncoding("UTF-8"); //设置请求字符集为UTF-8
String action = request.getParameter("action"); //获取action信息
//根据action不同执行不同的操作
if ("addTask".equals(action)) { //新建任务
String taskInfo = request.getParameter("taskInfo");
String buildDate = request.getParameter("buildDate");
out.print(addTask(taskInfo,buildDate));
} else if ("getTasks".equals(action)) { //获取整月任务信息
String month = request.getParameter("month");
String result = getTasks(month);
out.println(result);
} else if ("delTask".equals(action)) { //删除任务
String taskId = request.getParameter("taskId");
delTask(taskId);
} else if ("updateTask".equals(action)) { //更新任务信息
String taskId = request.getParameter("taskId");
String taskInfo = request.getParameter("taskInfo");
updateTask(taskId, taskInfo);
}
%>