鍍金池/ 問答/Java  HTML/ 寫了個移動端滑動日歷時間，如何根據(jù)時間向后面+30天(連帶星期)，如下圖和代碼

寫了個移動端滑動日歷時間，如何根據(jù)時間向后面+30天(連帶星期)，如下圖和代碼

問題

  1. 如下圖綠色框，如何讓下一天的星期幾也+1（只能是周一到周日）
  2. 如下圖藍色框和黃色框，現(xiàn)在情況是圖一，我想要達到圖二中的情況（現(xiàn)在是16點的范圍里內，所以第三列就滾動到16點的位置）,第一行，就顯示現(xiàn)在的真正時間，選中狀態(tài)有class=actived（第二列第四列除外），如黃色框

圖片

clipboard.png

clipboard.png

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .header {
            display: flex;
            align-items: center;
            height: 50px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
        }

        .header-item {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .box {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            border-top: 1px solid #ccc;
        }

        .box .box-item {
            flex: 1;
            height: 300px;
            box-sizing: border-box;
            border-right: 1px solid #ccc;
            overflow-x: hidden;
            overflow-y: auto;

        }

        .box .box-item:first-child {
            width: 40%;
            flex: 0 0 40%
        }

        ::-webkit-scrollbar {
            display: none
        }

        li {
            list-style: none;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            box-sizing: border-box;
            border-bottom: 1px solid #000;
        }

        li.actived {
            color: red;
            border-bottom: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="header">
        <div onclick="noFn()" class="header-item">取消</div>
        <div class="header-item">設定發(fā)布時間</div>
        <div onclick="yesFn()" class="header-item">確定</div>
    </div>
    <div class="box">
        <div id="one" class="box-item">
            <li class="actived"></li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </div>
        <div id="two" class="box-item">
            <li>上午</li>
            <li>下午</li>
        </div>
        <div id="three" class="box-item">
            <li>0:</li>
            <li>1:</li>
            <li>2:</li>
            <li>3:</li>
            <li>4:</li>
            <li>5:</li>
            <li>6:</li>
            <li>7:</li>
            <li>8:</li>
            <li>9:</li>
            <li>10:</li>
            <li>11:</li>
            <li>12:</li>
            <li>13:</li>
            <li>14:</li>
            <li>15:</li>
            <li>16:</li>
            <li>17:</li>
            <li>18:</li>
            <li>19:</li>
            <li>20:</li>
            <li>21:</li>
            <li>22:</li>
            <li>23:</li>
        </div>
        <div id="four" class="box-item">
            <li>00</li>
            <li>10</li>
            <li>20</li>
            <li>30</li>
            <li>40</li>
            <li>50</li>
        </div>
    </div>
</body>

</html>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    var dates = new Date();
    var month = dates.getMonth() + 1;
    var date = dates.getDate();
    var day = dates.getDay();
    var hours = dates.getHours();
    var min = dates.getMinutes();
    var AMPM;
    dateFn();
    function dateFn() {
        // 處理月分
        if (month < 10) {
            month = "0" + month;
        }


        // 處理星期幾
        if (day == 1) {
            day = "周一";
        } else if (day == 2) {
            day = "周二";
        } else if (day == 3) {
            day = "周三";
        } else if (day == 4) {
            day = "周四";
        } else if (day == 5) {
            day = "周五";
        } else if (day == 6) {
            day = "周六";
        } else if (day == 7) {
            day = "周日";
        }
        // 處理小時
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (hours < 12) {
            AMPM = "上午";
            $('#two li').eq(0).addClass('actived');
        } else {
            AMPM = "下午";
            $('#two li').eq(1).addClass('actived');
        }
        $('#three li').eq(hours).addClass('actived');
        var top = $('#three li').eq(hours).offset().top;
        $('#three').scrollTop($('#three li').eq(hours).offset().top)

        // 處理分
        if (0 <= min < 10) {
            $('#four li').eq(0).addClass("actived");
        } else if (10 <= min < 20) {
            $('#four li').eq(1).addClass("actived");
        } else if (20 <= min < 30) {
            $('#four li').eq(2).addClass("actived");
        } else if (30 <= min < 40) {
            $('#four li').eq(3).addClass("actived");
        } else if (40 <= min < 50) {
            $('#four li').eq(4).addClass("actived");
        } else {
            $('#four li').eq(5).addClass("actived");
        }



        var dateFnHtml = month + "月" + date + "日" + " " + day + " " + AMPM + " " + hours + ":" + min
        var one = month + "月" + date + "日" + " " + day;
        var two = AMPM;
        var three = hours;
        var four = min;

        // 處理日
        $('#one li').eq(0).html(one);
        $('#one li').eq(1).html(month + "月" + (date + 1) + "日" + " " + day);

        $('.box-item li').click(function () {
            $(this).addClass("actived").siblings().removeClass("actived");
        })
        // return dateFnHtml;
    }
    // var dateHtml = dateFn()
    // console.log(dateHtml)

    // 確定
    function yesFn() {
        var one = $('#one li.actived').html();
        var two = $('#two li.actived').html();
        var three = $('#three li.actived').html();
        var four = $('#four li.actived').html();
        var time = one + two + three + four;
        console.log(time)
    }
    // 取消
    function noFn() {
        $('#one li').eq(0).addClass('actived').siblings().removeClass("actived");
        $('#one').scrollTop(0);

        if (hours < 12) {
            AMPM = "上午";
            $('#two li').eq(0).addClass('actived');
        } else {
            AMPM = "下午";
            $('#two li').eq(1).addClass('actived');
        }


    }
</script>
回答
編輯回答
墨染殤

問題1：

new Date().getDay()//可以獲取對應日期的星期幾
//new Date('2018-02-23').getDay();今天，得到的是5這就是基數(shù)
['日','一','二','三','四','五','六'][(5+1)%7]//其中1是之后1天，7是一周七天

問題2：
構建出來之后獲取時間，然后控制父級的滾動高度就可以了

2017年10月9日 22:10