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

先上效果图：

动作：向前翻一页，显示为 2016年第1周；向后翻一页，显示为 2016年第3周

动作2：日期与数据关联

html：

    

            
周聊天消息分析
        
                                    
        
                
            
                
暂无数据
                                            
        
                

这么多代码只要看一个地方就OK了，这里有三个DIV,分别是：

previousDiv  上一页ID

nextDiv      下一页ID

headerTitleDiv 日期容器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(currentWeek     
6、获取下一周，并返回
    
function getNextWeek(){    //当前周加上一周主是下一周    currentWeek ++;    //如果当前周大于52周，满一年，当前年加一年，新的一年，第一周    if(currentWeek > 52){        currentYear ++;        currentWeek = 1;    }    return formartWeek();}
    
7、判断，如果下一页有数据，则，可以点击进入下一页，如果没有数据，按钮不可点击
    
function checkCanDoNext(){    if(defaultWeek     
8、重置上一页的监听事件，先给按钮加一个图片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的类型为text    
 
    
2.  前一页与后一页的点击事件中，可以加入与数据关联的方法，在点击进入下一页时，自动获取相应的数据
    
3.  给title添加input事件时，需要写一个判断：当前值 = 周日期的返回的方法。如果下一页有数据，才可以点击进入下一页：
    
$(title).on('input', function(){        if(this.value.length == 0){            this.value.length = formartWeek(new Date());        }else{            if(checkCanDoNext()){                fetchDate();                return;            }        }    });