以 “周” 为单位的可以翻页的效果显示为 2016年第2周

先上效果图：

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

动作2：日期与数据关联

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

previousDiv  上一页ID

nextDiv      下一页ID

headerTitleDiv    日期容器ID   

日期是需要放在input里的， ID为title

html：

<!--日期的容器-->
        <div class="headerDiv">
            <div id="previousDiv" class="previousImgDiv"></div>
            <div id="nextDiv" class="unNextImgDiv" ></div>
            <div id="headerTitleDiv" class="titleDiv"><input id="title" type="text" style="background-color:#f0f0f0;border:none;font-size: 20px;text-align:center;"/></div>
        </div>

注意：“周”的input的类型为text

下面是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 < 1){
        currentYear--;
        currentWeek = 52;
    }
    return formartWeek();
}

6、获取下一周，并返回

function getNextWeek(){
    //当前周加上一周主是下一周
    currentWeek ++;
    //如果当前周大于52周，满一年，当前年加一年，新的一年，第一周
    if(currentWeek > 52){
        currentYear ++;
        currentWeek = 1;
    }
    return formartWeek();
}

7、判断，如果下一页有数据，则，可以点击进入下一页，如果没有数据，按钮不可点击

function checkCanDoNext(){
    if(defaultWeek <= currentWeek && defautlYear <= currentYear){
        title.value = formartWeek();
        nextDiv.className = 'unNextImgDiv';
        nextDiv.removeEventListener('tap',nextDivTapEvent);
        return true;
    }else{
        resetNextEvent();
        nextDiv.className = 'nextImgDiv';
        return false;
    }
}

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 < 1000)
        years += 1900
    var days = new Array(12);
    days[0] = 31;
    days[2] = 31;
    days[3] = 30;
    days[4] = 31;
    days[5] = 30;
    days[6] = 31;
    days[7] = 31;
    days[8] = 30;
    days[9] = 31;
    days[10] = 30;
    days[11] = 31;
    
    //判断是否为闰年，针对2月的天数进行计算
    if (Math.round(now.getYear() / 4) == now.getYear() / 4) {
        days[1] = 29
    } else {
        days[1] = 28
    }
 
    if (now.getMonth() == 0) {
        totalDays = totalDays + now.getDate();
    } else {
        var curMonth = now.getMonth();
        for (var count = 1; count <= curMonth; count++) {
            totalDays = totalDays + days[count - 1];
        }
        totalDays = totalDays + now.getDate();
    }
    //得到第几周
    var week = Math.round(totalDays / 7);
    return week;
}

以上为周日期的方法，需要注意以下几点：

html中input的类型为text

<div id="headerTitleDiv" class="titleDiv"><input id="title" type="text" style="background-color:#f0f0f0;border:none;font-size: 20px;text-align:center;"/></div>

2. 前一页与后一页的点击事件中，可以加入与数据关联的方法，在点击进入下一页时，自动获取相应的数据

3. 给title添加input事件时，需要写一个判断：当前值 = 周日期的返回的方法。如果下一页有数据，才可以点击进入下一页：

$(title).on('input', function(){
        if(this.value.length == 0){
            this.value.length = formartWeek(new Date());
        }else{
            if(checkCanDoNext()){
                fetchDate();
                return;
            }
        }
    });

class样式请参考：http://www.cnblogs.com/baiyygynui/p/5124575.html

以 “周” 为单位的可以翻页的效果 显示为 2016年第2周

以 “周” 为单位的可以翻页的效果显示为 2016年第2周