公司要弄一个首页回顾的功能,可以查看以往某个时间的首页。程序每天自动在上午和下午分别抓取一个页面,生成地址为http://xxx.com/review/channel20090715am.html 的形式。
这个功能用到了jQuery UI 的 datepicker日历插件,但是主要的还是通过分析页面地址中的时间信息生成相应链接。
流程如下:
分析页面中的时间信息如20090715am 得出本页面的抓取日期并在页面中显示;
计算前一天的日期 判断是否存在前一天页面的连接(得根据抓取时间);
后一天的亦同;
如果当前页面是am(上午的页面) 则判断是否存在pm(下午的页面);
下午亦同;
生成相关链接 前一天 后一天 上午 / 下午 并判断链接可用性,如果没有前一天链接,则前一天按钮为不可用 (后一天亦同);
点击下拉框选择预览频道;
点击日历组件日期跳转到相应页面。
查看DEMO
下面是代码:
Code
// JavaScript Document By Trance
var dateNow=new Date();
var dateStart=new Date(2009, 7 - 1, 12); //起始时间
var pageurl=window.location.href; //页面地址
var urlClip=pageurl.split("/");
var dateInfo=urlClip[urlClip.length-1];
var urlDate=dateInfo.substr(dateInfo.length-15,8); //取得时间信息
var ampm=dateInfo.substr(dateInfo.length-7,2); //取得am pm
var pmam="";
var yesterdayLink=true; //是否存在前一天链接
var tomorrowLink=true; //是否存在后一天链接
function getpmam(){if(ampm=="am"){pmam="pm";}else{pmam="am";}}
getpmam();
var weekArray=["星期日",'星期一',"星期二","星期三","星期四","星期五","星期六"];
//回顾地址基础
var reviewurl='http://www.titan24.com/review/';
var channel='www'; //频道代号
var timetoview=20090715; //页面时间
var fomat='.html'; //页面格式 (最好不要改)
var analyDate= function (){ //分析页面地址中的时间信息 返回年 月 日 和一个时间对象
var urldateStr=String(urlDate);
var urlYear=Number(urldateStr.substr(0,4));
var urlMonth=Number(urldateStr.substr(4,2));
var urlDay=Number(urldateStr.substr(6,2));
return [urlYear,urlMonth,urlDay,new Date( urlYear , urlMonth -1 ,urlDay)];
}
function getNeardays(){ //计算前一天 和 后一天的时间 并判断是否存在相应文件
var yesterday=new Date(analyDate()[3].getTime()-(24*60*60*1000));
if(yesterday.getTime()<dateStart.getTime()){
yesterdayLink=false;
}
var tomorrow =new Date(analyDate()[3].getTime()+(24*60*60*1000));
var timePlug=0;
if(ampm=="am"){
timePlug=8*60*60*1000;
}else{
timePlug=20*60*60*1000;
}
if((tomorrow.getTime()+timePlug)>dateNow.getTime()){
tomorrowLink=false;
}
return [dateTostring(yesterday),dateTostring(tomorrow)];
}
//alert(getNeardays()[1])
function creatLinks(){ //创建相应链接
var neardays=getNeardays();
var urlYesterday=pageurl.replace(urlDate,neardays[0]);
var urlTomorrow=pageurl.replace(urlDate,neardays[1]);
var urlTodayother=pageurl.replace(ampm,pmam);
return[urlYesterday,urlTomorrow,urlTodayother]
//alert(urlTodayother);
}
creatLinks()
function dateTostring(adate){ //将日期对象转变为 20090715 形式的字符串
//if(!(typeof(adate)==object)) return null;
var adateYear = adate.getFullYear();
var adateMonth = adate.getMonth();
var adateDate = adate.getDate();
adateMonth = handleBit(adateMonth + 1);
adateDate = handleBit(adateDate);
return adateYear+adateMonth+adateDate;
}
//getNeardays();
function handleBit(bit){ //处理单位的数字
if(bit.toString().length == 1){
bit = "0" + bit;
}
return bit;
}
var getPagedate=function (){ //获得当前页面抓取的时间
var tmpdate=analyDate();
var urlNewdate=tmpdate[3].getDay();
var thispageDate="";
thispageDate+=tmpdate[0]+'年 '+tmpdate[1]+'月 '+tmpdate[2]+'日 '+weekArray[urlNewdate];
//alert(thispageDate);
return thispageDate;
}
$(function(){
//标记当前页面时期
$("#today").html(getPagedate());
addLinks();
function addLinks(){ //判断可用性 并加链接
var linkarray=creatLinks();
if(!yesterdayLink){
$("span.yesterday").show();
}else{
$("#yesterday").attr("href",linkarray[0]).show();
}
if(!tomorrowLink){
$("span.tomorrow").show();
}else{
$("#tomorrow").attr("href",linkarray[1]).show();
}
$("#"+pmam).attr("href",linkarray[2]).show();
$("span."+ampm).show();
}
$("#datepicker").datepicker({
currentText: '今天',
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], // 月份名,简写,支持HTML
dayNames: weekArray , // 星期名,支持HTML
dayNamesMin: ['日','一','二','三','四','五','六'], // 日历首列显示的星期名,最简,支持HTML
minDate: dateStart, //开始日期
maxDate: dateNow, //可选截止日期
changeMonth: true, //显示月份下拉条
changeYear: true, //显示年下拉条
dateFormat: 'yymmdd',//设置日期格式
onSelect:function(){
timetoview=Number($(this).val());
makelinks(); //选择后自动跳转
}
});
//自动跳转
function makelinks(){
var linktogo=reviewurl+channel+timetoview+ampm+fomat;
window.open(linktogo,"_self"); //auto open
}
//改变频道代号
$("#chn_seler").change(function(){
channel=$(this).val();
})
//end of document.ready
})
// JavaScript Document By Trance
var dateNow=new Date();
var dateStart=new Date(2009, 7 - 1, 12); //起始时间
var pageurl=window.location.href; //页面地址
var urlClip=pageurl.split("/");
var dateInfo=urlClip[urlClip.length-1];
var urlDate=dateInfo.substr(dateInfo.length-15,8); //取得时间信息
var ampm=dateInfo.substr(dateInfo.length-7,2); //取得am pm
var pmam="";
var yesterdayLink=true; //是否存在前一天链接
var tomorrowLink=true; //是否存在后一天链接
function getpmam(){if(ampm=="am"){pmam="pm";}else{pmam="am";}}
getpmam();
var weekArray=["星期日",'星期一',"星期二","星期三","星期四","星期五","星期六"];
//回顾地址基础
var reviewurl='http://www.titan24.com/review/';
var channel='www'; //频道代号
var timetoview=20090715; //页面时间
var fomat='.html'; //页面格式 (最好不要改)
var analyDate= function (){ //分析页面地址中的时间信息 返回年 月 日 和一个时间对象
var urldateStr=String(urlDate);
var urlYear=Number(urldateStr.substr(0,4));
var urlMonth=Number(urldateStr.substr(4,2));
var urlDay=Number(urldateStr.substr(6,2));
return [urlYear,urlMonth,urlDay,new Date( urlYear , urlMonth -1 ,urlDay)];
}
function getNeardays(){ //计算前一天 和 后一天的时间 并判断是否存在相应文件
var yesterday=new Date(analyDate()[3].getTime()-(24*60*60*1000));
if(yesterday.getTime()<dateStart.getTime()){
yesterdayLink=false;
}
var tomorrow =new Date(analyDate()[3].getTime()+(24*60*60*1000));
var timePlug=0;
if(ampm=="am"){
timePlug=8*60*60*1000;
}else{
timePlug=20*60*60*1000;
}
if((tomorrow.getTime()+timePlug)>dateNow.getTime()){
tomorrowLink=false;
}
return [dateTostring(yesterday),dateTostring(tomorrow)];
}
//alert(getNeardays()[1])
function creatLinks(){ //创建相应链接
var neardays=getNeardays();
var urlYesterday=pageurl.replace(urlDate,neardays[0]);
var urlTomorrow=pageurl.replace(urlDate,neardays[1]);
var urlTodayother=pageurl.replace(ampm,pmam);
return[urlYesterday,urlTomorrow,urlTodayother]
//alert(urlTodayother);
}
creatLinks()
function dateTostring(adate){ //将日期对象转变为 20090715 形式的字符串
//if(!(typeof(adate)==object)) return null;
var adateYear = adate.getFullYear();
var adateMonth = adate.getMonth();
var adateDate = adate.getDate();
adateMonth = handleBit(adateMonth + 1);
adateDate = handleBit(adateDate);
return adateYear+adateMonth+adateDate;
}
//getNeardays();
function handleBit(bit){ //处理单位的数字
if(bit.toString().length == 1){
bit = "0" + bit;
}
return bit;
}
var getPagedate=function (){ //获得当前页面抓取的时间
var tmpdate=analyDate();
var urlNewdate=tmpdate[3].getDay();
var thispageDate="";
thispageDate+=tmpdate[0]+'年 '+tmpdate[1]+'月 '+tmpdate[2]+'日 '+weekArray[urlNewdate];
//alert(thispageDate);
return thispageDate;
}
$(function(){
//标记当前页面时期
$("#today").html(getPagedate());
addLinks();
function addLinks(){ //判断可用性 并加链接
var linkarray=creatLinks();
if(!yesterdayLink){
$("span.yesterday").show();
}else{
$("#yesterday").attr("href",linkarray[0]).show();
}
if(!tomorrowLink){
$("span.tomorrow").show();
}else{
$("#tomorrow").attr("href",linkarray[1]).show();
}
$("#"+pmam).attr("href",linkarray[2]).show();
$("span."+ampm).show();
}
$("#datepicker").datepicker({
currentText: '今天',
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], // 月份名,简写,支持HTML
dayNames: weekArray , // 星期名,支持HTML
dayNamesMin: ['日','一','二','三','四','五','六'], // 日历首列显示的星期名,最简,支持HTML
minDate: dateStart, //开始日期
maxDate: dateNow, //可选截止日期
changeMonth: true, //显示月份下拉条
changeYear: true, //显示年下拉条
dateFormat: 'yymmdd',//设置日期格式
onSelect:function(){
timetoview=Number($(this).val());
makelinks(); //选择后自动跳转
}
});
//自动跳转
function makelinks(){
var linktogo=reviewurl+channel+timetoview+ampm+fomat;
window.open(linktogo,"_self"); //auto open
}
//改变频道代号
$("#chn_seler").change(function(){
channel=$(this).val();
})
//end of document.ready
})