公司要弄一个首页回顾的功能,可以查看以往某个时间的首页。程序每天自动在上午和下午分别抓取一个页面,生成地址为http://xxx.com/review/channel20090715am.html 的形式。

首页回顾功能 

这个功能用到了jQuery UI 的 datepicker日历插件,但是主要的还是通过分析页面地址中的时间信息生成相应链接。

流程如下:
分析页面中的时间信息如20090715am 得出本页面的抓取日期并在页面中显示;
计算前一天的日期 判断是否存在前一天页面的连接(得根据抓取时间);
后一天的亦同;
如果当前页面是am(上午的页面) 则判断是否存在pm(下午的页面);
下午亦同;
 生成相关链接 前一天 后一天 上午 / 下午 并判断链接可用性,如果没有前一天链接,则前一天按钮为不可用 (后一天亦同);
点击下拉框选择预览频道;
点击日历组件日期跳转到相应页面。

查看DEMO 

下面是代码:

;}}
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           
})

 

相关文章: