您的位置:首页 > Web前端

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

2015-09-25 11:30 302 查看
实现功能:

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

效果:



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();


谢谢关注!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: