ajax实时任务提示功能的实现代码第1/2页
本项目运用了 FLEAPHP,MYSQL,SMARTY,FCKEDItor,JSON,PROTOTYPE的技术,在这里首先要感谢这些开源项目的开发者给我们带来的好东西,其次要感谢[生气猪--让我帮她做一个这样的小东西来提醒她按时完成事情].花了一个3个小时完成.希望给大家起到抛砖引玉的作用啊....
/ucren/taskofpig/tpl/taskofpig.main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><%$sitename%> -- <%$opname%></title>
<script type="text/javascript" src="/ucren/prototype/prototype.js"></script>
<script type="text/javascript" src="/ucren/json/json_parse.js"></script>
<script type="text/javascript" src="js/tasktip.js"></script>
</head>
<body>
<bgsound>
<div>
<span id='task_attime'></span>
</div>
<hr>
<p>
<span onClick="document.location='index.php?op=add'">添加</span> |
<span onClick="document.location='index.php?op=search'">查看任务提示</span> |
</p>
<hr>
<hr>
<table width="90%" border="1" cellspacing="1" bgcolor="#cfdadc">
<tr bgcolor="#e8edec" align="center">
<td><b>ID</b></td>
<td><b>主题</b></td>
<td><b>任务内容</b></td>
<td><b>任务提示时间</b></td>
<td colspan="2"><b>管理</b></td>
</tr>
<%section name=rowIndex loop=$rowSet%>
<tr align="center">
<td><%$rowSet[rowIndex].id%></td>
<td><%$rowSet[rowIndex].title%></td>
<td><%$rowSet[rowIndex].desc%></td>
<td><%$rowSet[rowIndex].date%></td>
<td onClick="document.location='index.php?op=edit&id=<%$rowSet[rowIndex].id%>'"><b>编辑</b></td>
<td onClick="document.location='index.php?op=del&id=<%$rowSet[rowIndex].id%>'"><b>删除</b></td>
</tr>
<%/section%>
</table>
</body>
</html>
/ucren/taskofpig/tpl/taskofpig.edit.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><%$sitename%> -- <%$opname%></title>
</head>
<body bgcolor="e8edec">
<div align="center">
<form method="post" action="index.php?&act=update&id=<%$rowSet.id%>">
<table width="80%" border="1" cellspacing="1" bgcolor="#cfdadc">
<tr bgcolor="e8edec">
<td>任务标题: <input name="title" type="text" size="80" value="<%$rowSet.title%>"></td>
</tr>
<tr bgcolor="e8edec">
<td>提示时间: <input name="date" type="text" size="40" value="<%$rowSet.date%>"></td>
</tr>
<tr bgcolor="e8edec">
<td class="forumRow">任务内容<%$fck_area%></td>
</tr>
</table>
<input type="submit" value="提交">
<input type="button" value="返回" onclick="document.location='index.php'">
</form>
</div>
</body>
</html>
/ucren/taskofpig/tpl/taskofpig.add.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><%$sitename%> -- <%$opname%></title>
</head>
<body bgcolor="e8edec">
<div align="center">
<form method="post" action="index.php?&act=add">
<table width="80%" border="1" cellspacing="1" bgcolor="#cfdadc">
<tr bgcolor="e8edec">
<td>任务标题: <input name="title" type="text" size="80" ></td>
</tr>
<tr bgcolor="e8edec">
<td>提示时间: <input name="date" type="text" size="40" value="<%$taskTime%>"></td>
</tr>
<tr bgcolor="e8edec">
<td class="forumRow">任务内容<%$fck_area%></td>
</tr>
</table>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="Submit3" value="重设">
</form>
</div>
</body>
</html>
/ucren/taskofpig/js/tasktip.js
//任务提示脚本实现,依赖于/ucren/prototype/prototype.js
var TaskTipAjax = function (){
this.desc = '按一定的时间间隔查询数据库中到期的事件信息,并给出提示[打开新窗口,播放一段音乐]' ;
}
//通过Ajax按时查询和提示
TaskTipAjax.prototype.doAction = function(obj)
{
var myAjax = new Ajax.Request(
'index.php?op=search' ,
{
method: 'get' ,asynchronous: true ,
onComplete: obj.showResponse
}
) ;
}
TaskTipAjax.prototype.showResponse = function (response)
{
if (response.responseText != '')
{
//此方法在/ucren/json/json_parse.js中定义
//task_obj是一个对象
//task_obj.id task_obj.title task_obj.desc task_obj.date
var task_obj = json_parse(response.responseText);
var newwin=window.open('','任务报时器','height=200, width=600,toolbar=0,menubar=0,location=0, status=0');
newwin.opener = null // 防止代码对论谈页面修改
//防止页面内容重复
if( typeof(newwin.document.body) != "undefined")
newwin.document.body.innerHTML = "";
newwin.document.write("<html><body><bgsound src='music/moonlight.mp3' autostart=true loop=infinite>");
newwin.document.write('<h1>任务报时器</h1><br/>');
newwin.document.write('<table border="1">');
newwin.document.write('<tr>');
newwin.document.write('<td width="33" bgcolor="#E8E8E8">ID</td>');
newwin.document.write('<td width="33" bgcolor="#E8E8E8">标题</td>');
newwin.document.write('<td width="33" bgcolor="#E8E8E8">描述</td>');
newwin.document.write('<td width="33" bgcolor="#E8E8E8">时间</td>');
newwin.document.write('</tr>');
newwin.document.write('<tr>');
newwin.document.write('<td>'+ task_obj.id +'</td>');
newwin.document.write('<td>'+ task_obj.title +'</td>');
newwin.document.write('<td>'+ task_obj.desc +'</td>');
newwin.document.write('<td>'+ task_obj.date +'</td>');
newwin.document.write('</tr>');
newwin.document.write('</table>');
newwin.document.write("</body></html>");
//置顶
newwin.focus();
}
}
var obj = new TaskTipAjax();
setInterval("obj.doAction(obj)",1000) ;
/ucren/taskofpig/music/moonlight.mp3
这个音乐 可以自己改
上面的代码熟悉JAVA的应该都可以看懂,这里只是要阐述一个简单的设计方案,希望大家予以增加扩展功能,谢谢,发我邮件,或者留言.
我觉得软件开发最重要的是开发思路,至于用什么语言实现倒是其次了,(*^__^*) 嘻嘻……