[前端] 获取前一天和后一天

实现功能：

默认显示今天的日期，然后点击左箭头获取前一天，点击右箭头获取后一天

 

效果：

 

html布局：

 

<div class="zh_date_box pull-left">
    <div class="zh_date_switch zh_prev"></div>
    <div class="zh_date_content">
        8月23日<br>
        周一
    </div>
    <div class="zh_date_switch zh_next"></div>
</div>

 

 

 

js脚本：

 

function onDutyDate() {
    var oDate = new Date();
    var month = oDate.getMonth();
    var date = oDate.getDate();
    var day = oDate.getDay();
    var week = ['周日','周一','周二','周三','周四','周五','周六'];
    var index = 0;
    // 今天
    var dateStr = (month+1)+'月'+date+'日'+'<br>'+week[day];
    $('.zh_date_content').html(dateStr);

    // 前一天
    $('.zh_date_switch.zh_prev').click(function() {
        index--;
        if(index<-1) {
            index=-1;
            return false;
        }
        oDate.setDate(date+index);
        var prevDateStr = (oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+'<br>'+week[oDate.getDay()];
        $('.zh_date_content').html(prevDateStr);
    });

    // 后一天
    $('.zh_date_switch.zh_next').click(function() {
        index++;
        if(index>1) {
            index=1;
            return false;
        }
        oDate.setDate(date+index);
        var nextDateStr = (oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+'<br>'+week[oDate.getDay()];
        $('.zh_date_content').html(nextDateStr);
    });
}
onDutyDate();

 

欢迎关注技术开发分享录：http://fenxianglu.cn/