实现签到情况的历史信息展示

遇到一个需求，根据输入的年月查询展示签到天的高亮展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    #schedule-box{
        width: 320px;
        margin: 0 auto;
        padding: 35px 20px;
        font-size: 13px;
    }
    .schedule-hd{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    .today{
        flex: 1;
        text-align: center;
    }
    .ul-box{
        overflow: hidden;
    }
    .ul-box > li{
        float: left;
        width: 14.28%;
        text-align: center;
        padding: 5px 0;
    }
    .other-month{
        color: #DCDFE6;
    }
    .current-month{
        color: #333333;
    }
    .today-style{
        border-radius: 50%;
        background: #58d321;
    }
    .sunday-color{
        color: #FF5A7B!important;
    }
    .arrow{
        cursor: pointer;
    }
    .dayStyle{
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
    }
    /*.current-month > .dayStyle:hover{
        background: #00BDFF;
        color: #ffffff;
    }*/
    .today-flag{
        background: #00C2B1;
        color: #fff;
    }
    .boxshaw{
        box-shadow: 2px 2px 15px 2px #e3e3e3;
    }
    .selected-style {
        background: #00BDFF;
        color: #ffffff;
    }
    </style>
</head>
<body>
    <div id='schedule-box' class="boxshaw">
        <ul class="week-ul ul-box">
            <li class="sunday-color">Sun</li>
            <li>Mon</li>
            <li>Tue</li>
            <li>Wen</li>
            <li>Thr</li>
            <li>Fri</li>
            <li>Sat</li>
        </ul>
        <ul class="schedule-bd ul-box" ></ul>
    </div>
    <script type="text/javascript">
        window.onload=function(){
            showtime()
        }

        function formartDate (y,m,d,symbol) {
            symbol = symbol || '-';
            m = (m.toString())[1] ? m : '0'+m;
            d = (d.toString())[1] ? d : '0'+d;
            return y+symbol+m+symbol+d
        }
        function showtime(){
            var ass = ['2018-10-14','2018-10-15','2018-10-16','2018-10-31'];
            var year = 2018,
            month = 9,
            selectedDate = '';
            var el = document.querySelector('body');
            var fullDay = new Date(year,month+1,0).getDate(), //当月总天数
            startWeek = new Date(year,month,1).getDay(), //当月第一天是周几
            total = (fullDay+startWeek)%7 == 0 ? (fullDay+startWeek) : fullDay+startWeek+(7-(fullDay+startWeek)%7),//元素总个数
            lastMonthDay = new Date(year,month,0).getDate(), //上月最后一天
            eleTemp = [];
            for(var i = 0; i < total; i++){
                if(i<startWeek){
                    eleTemp.push('<li class="other-month"><span class="dayStyle">'+(lastMonthDay-startWeek+1+i)+'</span></li>')
                }else if(i<(startWeek+fullDay)){
                    var nowDate = formartDate(year,month+1,(i+1-startWeek),'-');
                    
                    var addClass = '';
                    selectedDate == nowDate && (addClass = 'selected-style');
                    var boolt = false;
                    for(var j=0;j<ass.length;j++){
                        if (nowDate == ass[j]) {
                            // formartDate(currentYear,currentMonth+1,currentDay,'-') == nowDate && (addClass = 'today-flag');
                            if (i%7 == 0) {
                              eleTemp.push('<li class="current-month" ><span title='+nowDate+' class="currentDate selected-style sunday-color dayStyle'+addClass+'">'+(i+1-startWeek)+'</span></li>');  
                            }else{
                               eleTemp.push('<li class="current-month" ><span title='+nowDate+' class="currentDate selected-style dayStyle'+addClass+'">'+(i+1-startWeek)+'</span></li>'); 
                            }
                            
                            boolt = true;
                        }
                    }   
                    if(!boolt) {
                        if (i%7 == 0) {
                           eleTemp.push('<li class="current-month" ><span title='+nowDate+' class="currentDate sunday-color dayStyle'+addClass+'">'+(i+1-startWeek)+'</span></li>') 
                        }else{
                            eleTemp.push('<li class="current-month" ><span title='+nowDate+' class="currentDate dayStyle'+addClass+'">'+(i+1-startWeek)+'</span></li>')
                        }
                        
                    }
                }else{
                    eleTemp.push('<li class="other-month"><span class="dayStyle">'+(i+1-(startWeek+fullDay))+'</span></li>')
                }
            }
            el.querySelector('.schedule-bd').innerHTML = eleTemp.join('');
        }
    </script>
</body>
</html>
month,year,ass都是自己模拟的数据，根据需要换成动态的赋值，数据换成后端请求回来的json数组即可
根据模拟数据得到的2018年10月份的签到展示
实现签到情况的历史信息展示

猜你喜欢
