首页回顾功能

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

 

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

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

查看DEMO 

下面是代码:

ContractedBlock.gifExpandedBlockStart.gifCode

// JavaScript Document By Trance
var dateNow=new Date();
var dateStart=new Date(20097 - 112); //起始时间
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           
})

 

转载于:https://www.cnblogs.com/trance/archive/2009/07/16/1525035.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器内核总结

一般来讲&#xff0c;浏览器分为外壳部分和渲染部分。外壳部分就是用户看得见摸得到的外观和操作界面;而渲染部分则包括了浏览器内核和JS引擎&#xff0c;其中JS引擎主要负责执行javascript语言实现网页上的动作&#xff0c;而内核则负责渲染网页&#xff0c;把数据变成用户可以…

mysql卸载重装总是卡在starting server这一选项

因为自己不小心把msyql给下载了&#xff0c;重装了一个5.7版本的可是在安装时卡在starting server这一部分&#xff0c;运行不下去。重写卸载重装仍然不成功&#xff0c;还是卡在starting server.无法继续下面的安装&#xff0c;查看日志也没有报错信息。 问题分析&#xff1a;…

箭头函数与普通函数的区别

箭头函数&#xff1a; let fun () > {console.log(lalalala); } 普通函数&#xff1a; function fun() {console.log(lalla); } 箭头函数相当于匿名函数&#xff0c;并且简化了函数定义。箭头函数有两种格式&#xff0c;一种只包含一个表达式&#xff0c;连{ ... }和return…

前端基础-HTML标记语言

阅读目录 一、 HTML标签与文档结构二、 HTML标签详细语法与注意点三、 HTML中标签分类四、 HTML注释 一、 HTML标签与文档结构 HTML作为一门标记语言&#xff0c;是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。 那什么是标签呢&#xff1f; #…

带有Gradle的Docker容器分为4个步骤

您是否需要通过Java Web应用程序创建Docker映像&#xff1f; 您在使用Gradle吗&#xff1f; 如果是这样&#xff0c;那么您距Docker nivana仅4步之遥。 对于此示例&#xff0c;我将使用一个简单的Spring Boot应用程序。 您可以在我的名为galoshe的Github存储库中找到所有源代码…

第七周

这个作业属于哪个课程C语言程序设计 &#xff08;第三版&#xff09;这个作业要求在哪里2019春季第七周作业我的课程目标学习指针的运用这个作业在哪个具体方面帮助我实现目标这个作业让我知道了指针实用性参考文献无一、2019春第七周作业&#xff08;基础题&#xff09; 7-2 自…

Java EE 8 –为更多设备提供更多应用程序

如果我不喜欢夏天的一件事&#xff0c;那就是事实是没有太多要分享或谈论的新闻。 谁决定将Java Day Tokyo置于这一年的无聊时间里&#xff0c;谁干得不错&#xff0c;就给我一个机会撰写有关新的和即将到来的Java EE 8规范的博客文章&#xff0c;其中包含了更多的思想和建议。…

Gradle入门:依赖管理

即使不是没有可能&#xff0c;创建没有任何外部依赖关系的现实应用程序也是一项挑战。 这就是为什么依赖性管理是每个软件项目中至关重要的部分的原因。 这篇博客文章描述了我们如何使用Gradle管理项目的依赖关系。 我们将学习配置已使用的存储库和所需的依赖项。 我们还将通过…

HTML5常用标签及特殊字符表

*http://html5doctor.com/nav*http://html5doctor.com/article*http://html5doctor.com/section*http://html5doctor.com/asidehttp://html5doctor.com/divhttp://html5doctor.com/figurehttp://html5doctor.com/outlinehttp://html5doctor.com/semantics p 和 span 的理解 p标…

【转载】使用Imaging组件加载GIF动画

Mobil手机加载GIF动态图像的方法有两种&#xff0c;一个就是使用GIF89a标准算法&#xff0c;另一个就是使用SDK自带的Imaging组件&#xff0c;这两种方法是很典型的手机图像处理技术的实践。使用Imaging组件加载GIF比使用标准算法处理高效的多&#xff0c;特别是在处理真彩GIF动…

【处理手记】Configuration system failed to initialize异常的另类原因

有个c#程序在某台电脑上&#xff0c;执行某个操作时&#xff0c;总是会报如图错误&#xff1a; 度娘一番&#xff0c;发现市面上常见的原因是配置文件中的特定节点的位置不对&#xff0c;或者配置文件损坏等等&#xff0c;而这个程序根本没有使用内置的配置文件方案&#xff0c…

学习《Building Applications with FME Objects》 之四 从数据集读取要素

FMEOReader可以访问任何支持格式的数据。 FMEOReader返回两类要素&#xff1a;schema&#xff08;模式&#xff09;要素和数据要素&#xff0c;模式要素用于描述数据集模型。每种支持的格式都有一个模式&#xff0c;一个模式要素是一类要素的数据模型&#xff0c;模式要素描述属…

使用Zapier将应用程序与Neo4j集成

最近&#xff0c;我被带往Zapier &#xff0c;以便在系统之间完成一些轻量级的集成&#xff0c;以快速地进行概念验证。 最初是持怀疑态度的&#xff0c;我发现它确实可以节省时间&#xff0c;并将您从未集成过的系统所有部分捆绑在一起。 而且&#xff0c;这是人们集成他们使…

[silverlight基础]仿文字连接跑马灯效果-高手绕道

运行效果如下:分析示意图&#xff1a;代码:1<Canvas x:Name"a"Background"AliceBlue"MouseEnter"a_MouseEnter"MouseLeave"a_MouseLeave"Cursor"Hand">2<Canvas.Clip>3<RectangleGeometry RadiusX"0&qu…

Hibernate脏检查的剖析

介绍 持久性上下文使实体状态转换进入队列&#xff0c;该实体状态转换在刷新后转换为数据库语句。 对于托管实体&#xff0c;Hibernate可以代表我们自动检测传入的更改并安排SQL UPDATE。 这种机制称为自动脏检查 。 默认的脏检查策略 默认情况下&#xff0c;Hibernate检查所有…

软件工程第二次作业-VSTS单元测试

一、选择开发工具 开发工具选择 Visual studio 2017 社区版&#xff0c;开发语言为C 由于之前已经安装完毕&#xff0c;所以不上传安装过程&#xff0c;主界面如下&#xff1a; 二、练习自动单元测试 使用的测试工具是VSTS&#xff0c;具体步骤如下&#xff1a; 1.编写一个判断…

随便写写(8)

凌晨两点了&#xff0c;还在捣鼓虚拟机&#xff0c;教师节老师们吃不上饭&#xff0c;罪过可就大了。远程有点慢&#xff0c;还遇到个小问题&#xff0c;.netfx 3.5几次都没装上&#xff0c;看了下日志&#xff0c;好像是ghost里的.netfx 2.0有问题&#xff0c;想卸载之&#x…

识别JVM –比预期的要复杂

在Plumbr&#xff0c;我们花了最后一个月的时间来为将来的重大改进奠定基础。 此类构件之一是为JVM添加唯一标识符&#xff0c;以便将来自同一JVM的所有会话链接在一起。 虽然一开始看起来似乎很琐碎的任务&#xff0c;但是当查看JVM捆绑的jps命令的输出时&#xff0c;围绕该问…

React后台管理系统-品类的增加、修改和查看

1.页面 2.品类列表展示 let listBody this.state.list.map((category, index) > { return ( <tr key{index}> <td>{category.id}</td> <td>{category.name}</td> <td> <a className"opear" onClick{(e) > this.onUpda…

Vue node.js商城-购物车模块

一、渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { cartList:[] // 购物车商品列表 } }, mounted:function(){ this.init(); }, methods:{ init(){ // 初始化商品数据 axios.get(/users/…