zoukankan      html  css  js  c++  java
  • js一周时间表

        <div class="datetext">
                   <img class="dateLeft" src="./images/dateLeft.png">
                   <div><span class="startDate">2019-07-08</span><span class="endDate">2019-07-14</span></div>
                   <img class="dateRight" bindtap="nextWeek" src="./images/dateRight.png">
           </div>
    // 一周时间表
                function getBeforeDate(n) {//n为你要传入的参数,当前为0,前一天为-1,后一天为1
                    var date = new Date();
                    var year, month, day;
                    date.setDate(date.getDate() + n);
                    year = date.getFullYear();
                    month = date.getMonth() + 1;
                    day = date.getDate();
                    s = year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (day < 10 ? ('0' + day) : day);
                    return s;
                }
    
                getBeforeDate(0);
    
                function addDate(date, days) {
                    var d = new Date(date);
                    d.setDate(d.getDate() + days);
                    var month = d.getMonth() + 1;
                    var day = d.getDate();
                    if (month < 10) {
                        month = "0" + month;
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    var val = d.getFullYear() + "-" + month + "-" + day;
                    return val;
                }
    
                var nowDate = new Date();
                //当前日
                var nowDay = nowDate.getDate();
                //今天是本周的第几天
                var nowDayOfWeek = nowDate.getDay();
                // console.log(nowDayOfWeek)
                // console.log(getBeforeDate(1 - nowDayOfWeek));
                // 获取当前一周时间表
                $('.startDate').html(getBeforeDate(1 - nowDayOfWeek));
                $('.endDate').html(getBeforeDate(1 - nowDayOfWeek + 6));
                // 点击上一周
                $('.dateLeft').on('click', function () {
                    let dateStart = addDate($('.startDate').html(), -7);
                    let dateEnd = addDate($('.endDate').html(), -7);
                    $('.startDate').html(dateStart);
                    $('.endDate').html(dateEnd);
                })
                // 点击下一周
                $('.dateRight').on('click', function () {
                    let dateStart = addDate($('.startDate').html(), 7);
                    let dateEnd = addDate($('.endDate').html(), 7);
                    $('.startDate').html(dateStart);
                    $('.endDate').html(dateEnd);
                })
    .datetext {
                padding: 0 0.4267rem;
                height: 1.3067rem;
                display: flex;
                align-items: center;
                background: #fff;
                margin-top: 0.0133rem;
            }
    
            .datetext>img {
                width: 0.6667rem;
                height: 0.6667rem;
            }
    
            .datetext>div {
                flex: 1;
                text-align: center;
                color: #333;
                font-size: 0.4533rem;
            }
  • 相关阅读:
    bootstrap模态框视频,图片,页面
    curl 的用法指南
    springboot tomcat设置https,springboot配置ssl
    expect脚本
    java8新特性CompletableFuture
    Windows自动备份Oracle数据库
    SQL语句对单个的MySQL存储过程导出
    Oracle表空间的使用
    Oracle数据库基本操作
    Linux 查询 OS、CPU、内存、硬盘信息
  • 原文地址:https://www.cnblogs.com/caoyuna/p/11719593.html
Copyright © 2011-2022 走看看