月历切换效果

前端入坑纪 25

上个礼拜天就想发的新文,一直到今天总算完成了。因为这回写的东西真的有点多啊!
要多多注解才行!

月历切换效果_第1张图片
简洁月历

OK,first things first!项目链接

HTML 结构
    
2017

六月

June

html的布局上没啥特别难的,用到最多的就是浮动布局,比如每个日期的li标签都是左浮动的,然后算好宽度和对应的margin

CSS 结构
        body {
            background: #fff;
        }
        
        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        img {
            border: none;
        }
        
        .clear::after {
            content: "";
            display: table;
            clear: both
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .cldrWrp {
            line-height: 35px;
            text-align: center;
            width: 100%;
            margin: 20px 0 0;
            /*box-shadow: 0 0 8px #cfcfcf;*/
            color: #666
        }
        
        #yearWrp {
            height: 40px;
            line-height: 40px;
            font-size: 20px;
        }
        
        .cldrBody span,
        .cldrBody ul li {
            float: left;
            display: block;
            width: 13%;
            margin-right: 1.5%;
        }
        
        #yearList a {
            float: left;
            display: block;
            font-size: 17px;
            width: 32%;
            margin: 7px;
            border-radius: 4px;
            margin-left: 0;
            margin-right: 2%;
            line-height: 50px;
            box-sizing: border-box;
            color: #333;
            background-color: #fafafa;
        }
        
        #yearList a:nth-child(3n) {
            margin-right: 0
        }
        
        #yearList {
            position: fixed;
            border-radius: 8px;
            box-shadow: 0 0 8px #ccc;
            top: 1%;
            left: 2%;
            bottom: 1%;
            right: 2%;
            z-index: 9;
            background-color: rgba(255, 255, 255, .95);
            overflow: scroll;
            display: none;
        }
        
        .cldrBody ul {
            margin: 12px 0;
        }
        
        .cldrBody span:last-child,
        .cldrBody ul li:nth-child(7n) {
            margin-right: 0
        }
        
        .cldrBody ul li {
            margin-bottom: 1.5%;
            height: 45px;
            line-height: 45px;
            background-color: #fafafa;
            color: #333;
            border-radius: 3px
        }
        
        .cldrBody ul li.preMounth {
            font-size: 12px;
            color: #999;
        }
        
        .cldrBody ul li.passed {
            color: #999;
        }
        
        .cldrBody ul li.innow {
            color: #fff;
            background-color: skyblue;
        }
        
        .arrs {
            display: block;
            position: relative;
            float: left;
            width: 30%;
            height: 70px;
        }
        
        .arrs::before {
            content: "";
            display: block;
            position: absolute;
            height: 16px;
            width: 16px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateZ(45deg);
            /*background-color: skyblue;*/
            border: 1px solid slategray;
        }
        
        #ltArr.arrs::before {
            border-top: 0;
            border-right: 0
        }
        
        #rtArr.arrs::before {
            border-bottom: 0;
            border-left: 0
        }
        
        .lunaName {
            float: left;
            width: 40%;
        }

类似如此的选择器 :nth-child(7n)代表 逢7的倍数时,附上对应的样式。

JS 结构
        var odate = document.getElementById('datesWrp');
        var nowDate = new Date(); //获取当前日期
        var nowdate = nowDate.getDate(); //当前日期的几号
        var nowmonth = nowDate.getMonth(); //当前日期的月份
        var nowyear = nowDate.getFullYear(); //当前日期的年份
        var yearMonthDayRun = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //闰年每个月的总天数
        var yearMonthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //平年每个月的总天数
        var englishNameOfMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var chineseNameOfMonth = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];


        //如果是闰年则返回true
        function runNian(yearNum) {
            if (yearNum % 4 == 0 && yearNum % 100 != 0 || yearNum % 400 == 0) {
                return true;
            } else {
                return false;
            }
        }


        //这里让每个月的日期生成,传入年份,月份
        function outPutli(yearStr, monthStr) {
            var str = "";
            var yearNum = Number(yearStr); //转成数字类型
            var monthNum = Number(monthStr) - 1; //js的月份从0开始,也就是0代表一月,1代表二月
            var firstDayDate = new Date(yearNum, monthNum, 1).getDay(); //获取月份第一天礼拜几

            var previousMonth = monthNum - 1; //上个月的月份

            // 上个月的天数计算
            var previousdayCount = runNian(yearNum) ? yearMonthDayRun[previousMonth] : yearMonthDay[previousMonth];

            //传入月份的天数计算
            var theDayCount = runNian(yearNum) ? yearMonthDayRun[monthNum] : yearMonthDay[monthNum];

            //如果当前月是一月,那上个月就是上一年的12月
            if (monthNum == 0) {
                var previousMonth = 11;
                var previousdayCount = runNian(yearNum - 1) ? yearMonthDayRun[previousMonth] : yearMonthDay[previousMonth];
            }

            //算出传入月份的第一天礼拜几,就知道上个月的末尾有几天是在1号前面
            for (var i = previousdayCount - firstDayDate + 1; i <= previousdayCount; i++) {
                str += "
  • " + i + "
  • "; } //生产传入月份的各个天数 for (var i = 1; i <= theDayCount; i++) { // 如果等于现在的日期,给个蓝色底 if (yearNum == nowyear && monthNum == nowmonth && i == nowdate) { str += "
  • " + i + "
  • "; } // 如果都是已经过去的日期,就淡化文字颜色 else if (yearNum < nowyear || yearNum == nowyear && monthNum < nowmonth || yearNum == nowyear && monthNum == nowmonth && i < nowdate) { str += "
  • " + i + "
  • "; } else { str += "
  • " + i + "
  • "; } } odate.innerHTML = str; } outPutli(nowyear, nowmonth + 1) var oYearBtn = document.getElementById('yearWrp'); var oYearList = document.getElementById('yearList'); var aBtnYear = oYearList.getElementsByTagName('a'); //年份按钮点击的时候生成相对于现在,前16年和后36年的年份 oYearBtn.onclick = function() { var yearNumber = Number(nowyear); var strs = ""; for (var i = 16; i >= 0; i--) { // 因为a是代码生成的,所以绑定的事件要一并写上才有效果 strs += "" + (yearNumber - i) + ""; } for (var i = 1; i <= 36; i++) { strs += "" + (yearNumber + i) + ""; } oYearList.innerHTML = strs; oYearList.style.display = "block"; } // 年份选择后的操作,月份默认为当年一月 function yearSelect(_this) { oYearBtn.innerHTML = _this.innerHTML; oYearList.style.display = 'none'; outPutli(_this.innerHTML, 1); olunaName.setAttribute('data-mouthNum', 1); olunaName.getElementsByTagName('h2')[0].innerText = chineseNameOfMonth[0]; olunaName.getElementsByTagName('h3')[0].innerText = englishNameOfMonth[0]; } var oltArr = document.getElementById('ltArr'); var ortArr = document.getElementById('rtArr'); var olunaName = document.getElementsByClassName('lunaName')[0]; // 改变月份的显示 function changeTheMonthName(numberMonth) { olunaName.setAttribute('data-mouthNum', numberMonth); olunaName.getElementsByTagName('h2')[0].innerText = chineseNameOfMonth[numberMonth - 1]; olunaName.getElementsByTagName('h3')[0].innerText = englishNameOfMonth[numberMonth - 1]; } //左箭头点击时效果,月份减 oltArr.onclick = function() { var numberMonth = olunaName.getAttribute('data-mouthNum'); if (numberMonth > 1) { numberMonth--; } outPutli(oYearBtn.innerHTML, numberMonth); changeTheMonthName(numberMonth); } //右箭头点击时效果,月份加 ortArr.onclick = function() { var numberMonth = olunaName.getAttribute('data-mouthNum'); if (numberMonth < 12) { numberMonth++; } outPutli(oYearBtn.innerHTML, numberMonth); changeTheMonthName(numberMonth); }

    算是加了比较详细的备注,小伙伴有兴趣的,可以慢慢研究下。若有不足,还请多多指教!

    好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福!

    你可能感兴趣的:(月历切换效果)