以“周”为单位的可以翻页的效果显示为2016年第2周_html/css_WEB-ITnose

    先上效果图：动作：向前翻一页，显示为 2016年第1周；向后翻一页，显示为 2016年第3周动作2：日期与数据关联html：这么多代码只要看一个地方就OK了，这里有三个DIV,分别是：previousDiv 上一页IDnextDiv 下一页IDheaderTitleDiv 日期容器ID 日期是需要放在input里的， ID为title日期的形式是day, input的type='text'，不可以是其它，否则，title不显示日期下面是JS的部分：1、自定义变量var previousDiv;var nextDiv;var headerTitleDiv;var title;//拼日期var currentWeek = theWeek();var defaultWeek = theWeek();var currentYear = theYear();var defautlYear = theYear();//监听上一页与下一页的点击事件var previousDivTapEvent;var nextDivTapEvent;2、变量初始化：$(document)。
    ready(function(){ previousDiv = document。getElementById('previousDiv'); nextDiv = document。
  getElementById('nextDiv'); headerTitleDiv = document。  getElementById('headerTitleDiv'); title = document。
  getElementById('title'); title。value = formartWeek(); //给前一页加点击事件，并监听它 previousDiv。  addEventListener('tap', previousDivTapEvent); $(title)。
  on('input', function(){ if(this。value。length == 0){ this。value。length = formartWeek(new Date()); }else{ if(checkCanDoNext()){ fetchDate(); return; } } }); }3、前一天监听事件（ fetchDate(); 日期与数据关联的方法，调用这个方法，可以取得与日期关联的数据 ）：function previousDivTapEvent(){ resetNextEvent(); nextDiv。
    className = 'nextImgDiv'; title。value = getPreviousWeek(title。value); //fetchDate(); 日期与数据关联的方法，调用这个方法，可以取得与日期关联的数据 fetchDate();}4、下一天监听事件：function nextDivTapEvent(){ resetPreviousEvent(); title。
    value = getNextWeek(); fetchDate(); if(checkCanDoNext){ nextDiv。removeEventListener('tap',nextDivTapEvent); return; }}5、获取上一周，并返回function getPreviousWeek(){ //当前周减去一周currentWeek--; currentWeek--; if(currentWeek6、获取下一周，并返回function getNextWeek(){ //当前周加上一周主是下一周 currentWeek ++; //如果当前周大于52周，满一年，当前年加一年，新的一年，第一周 if(currentWeek >52){ currentYear ++; currentWeek = 1; } return formartWeek();}7、判断，如果下一页有数据，则，可以点击进入下一页，如果没有数据，按钮不可点击function checkCanDoNext(){ if(defaultWeek8、重置上一页的监听事件，先给按钮加一个图片class;先删除原来的事件，再加上新的事件function resetPreviousEvent(){ previousDiv。
    className = 'previousImgDiv'; previousDiv。removeEventListener('tap',previousDivTapEvent); previousDiv。
  addEventListener('tap',previousDivTapEvent);}9、重置下一页的监听事件，方法同上function resetNextEvent(){ nextDiv。
    className = 'nextImgDiv'; nextDiv。removeEventListener('tap',nextDivTapEvent); nextDiv。
  addEventListener('tap',nextDivTapEvent);}10、格式化日期，以自定义方式返回function formartWeek(){ return currentYear + "年 第 " + currentWeek + "周";}11、获取当前年份function theYear(){ var now = new Date(); years = now。
    getFullYear(); return years;}12、获取当前周，并判断是否为闰年，针对2月的天数进行计算function theWeek(){ var totalDays = 0; now = new Date(); years = now。
  getYear() if (years以上为周日期的方法，需要注意以下几点：html中input的类型为text2。   前一页与后一页的点击事件中，可以加入与数据关联的方法，在点击进入下一页时，自动获取相应的数据3。
   给title添加input事件时，需要写一个判断：当前值 = 周日期的返回的方法。如果下一页有数据，才可以点击进入下一页：$(title)。on('input', function(){ if(this。
    value。length == 0){ this。value。length = formartWeek(new Date()); }else{ if(checkCanDoNext()){ fetchDate(); return; } } });。