黑马程序员技术交流社区

标题: 公开课页面中“QQ自动提醒我上课”原理分享 [打印本页]

作者: 八戒老师 时间: 2013-1-18 14:58
标题: 公开课页面中“QQ自动提醒我上课”原理分享
相信大家已经都知道每次的公开课页面，课表列表中一个 “QQ自动提醒我上课”如下图：

有很多同学过来询问我是怎么实现的，现在我把方法分享给大家。

下面这个网址就帮咱们实现了QQ提醒的功能，别被它的外面吓坏，虽然是长的有点恶心，但是它可是一段“神奇代码”。

http://qzs.qq.com/snsapp/app/bee/widget/open.htm?content=15%E5%A4%A9%E5%B8%A6%E4%BD%A0%E4%BB%8Ec%23%E5%9F%BA%E7%A1%80%E5%88%B0%E4%BA%BA%E4%BA%8B%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91%E3%80%82&time=2012-12-03%2019%3A30&advance=15

红色代表的是你需要发送的内容。（内容需要UrlEncode编码，下面有解释）

绿色代表的是日期（年月日）

粉色代表的是小时分钟

黄色代表的是提醒（提前多少分钟）

大家肯定会被红色代码所困惑，那些东西是什么呢？其实它确实发送的内容，只是我们要通过URL地址栏中访问时，需要进行中文 UrlEncode编码，好吧，我把工具发来。

网址：http://tool.chinaz.com/Tools/URLEncode.aspx

把编完码的代码粘贴到红色部分。

这样就可以提醒自己，或者把网址发给好友提醒他。

公开课批量添加不同时间的公开课QQ提醒是用JS实现的，给大家一段JS代码研究下：

<script type="text/javascript">
$(document).ready(function () {
$("#orderedlist tbody tr td p ").hover(function () {
var date =$(this).attr("startdate");
var time =$(this).attr("starttime");
var str = $(this).html();
str = str.toLowerCase();
str = str.split("<a")[0];
str=str.split("
")[0];
title = str;
title = title.replace("：", "");
title = title.replace(/<[^>]+>/g, "");
title = "公开课" + title + "即将开始，请到 YY频道【71257996】观看公开课视频直播。"
var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
if (isIE6) {
$(this).append(' <a class="qqtx" style="display:inline-block !important; heigth:20px;line-height:20px;" href="http://qzs.qq.com/snsapp/app/bee/widget/open.htm?content=' + encodeURIComponent(title) + '&time=' + date+ time + '&advance=5" target="_blank" title="添加提醒后，开课前5分钟，QQ会发送消息提醒您">QQ提醒</a>');
} else {
$(this).append('<a class="qqtx" style="display:inline-block !important; heigth:20px;line-height:20px;" href="http://qzs.qq.com/snsapp/app/bee/widget/open.htm?content=' + encodeURIComponent(title) + '&time=' + date + time + '&advance=5" target="_blank" title="添加提醒后，开课前5分钟，QQ会发送消息提醒您"><img style="display:inline !important;vertical-align:middle;" src="images/tx.gif"/></a>');
}
}, function () {
$(".qqtx").remove();
//$(".qqtx").fadeOut();
});
});
</script>

复制代码

八戒原创，欢迎转载！

作者: Rancho_Gump 时间: 2013-1-18 15:01
沙发顶一个

作者: 高境 时间: 2013-1-18 15:01
{:soso_e179:}牛

作者: 肖亚光 时间: 2013-1-18 15:50
支持一下

作者: 何竹冬 时间: 2013-1-18 15:51
{:soso_e179:}

作者: php天星 时间: 2013-1-18 15:52
从此爱上JS

作者: Just_Only 时间: 2013-1-18 15:52
{:soso_e102:}{:soso__5072561095055699074_3:} 好犀利的啊

作者: 姚玉鹏 时间: 2013-1-18 15:57
犀利!!!!~~~~~~~~~~~

作者: 胡元江 时间: 2013-2-26 20:22
留着，以后肯定用得上

作者: 被遗弃者 时间: 2013-2-27 13:23
支持！！！！！！！！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2