JS_日期插件

JS_日期插件

• 效果图

效果图.jpg

• css代码

* {
    margin: 0;
    padding: 0;
}

body,
html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    width: 420px;
    height: 200px;
    box-shadow: 0 0 5px #ddd;
    border-radius: 10px;
    font-size: 14px;
    line-height: 30px;
    padding: 20px;
}

.day-title {
    display: flex;
    justify-content: space-around;
    color: #333;
}

.row {
    display: flex;
    justify-content: space-around;
}

.row span {
    display: block;
    width: 60px;
    text-align: center;
    color: #555;
}

• HTML代码

<div class="container">
    <div class="day-title">
        <strong>星期一</strong>
        <strong>星期二</strong>
        <strong>星期三</strong>
        <strong>星期四</strong>
        <strong>星期五</strong>
        <strong>星期六</strong>
        <strong>星期日</strong>
    </div>
    <div class="content" id="content">
    </div>
</div>

• JS代码

var d=new Date();

d.setMonth(7);
d.setDate(1);
console.log(d);//此时日期为8月1号

d.setDate(0);
console.log(d);//此时为7月31号

d.setMonth(8);
console.log(d);//此时月份为9.31，但是没有31号，变为了10月第一天

d.setDate(0);
console.log(d);//应该为9月的最后一天30号

//创建日期对象;
var d = new Date();
d.setMonth(7);
d.setDate(1);
var start = d.getDay() === 0 ? 7 : d.getDay();
var allDays = getMonthDays(d.getMonth() + 1);
var lastMonthEnd = getMonthDays(d.getMonth());
// 这个月1号是周几 , 我在第一个数字里对应的位置添加上这日期;
// 1. 存放1 ~ 42所有数据;
var month_list = [];
for (var row = 0, count = 0; row < 6; row++) {
    var week_list = [];
    // 开头第一周 , 日期的起始点;
    if (row === 0) {
        for (var col = start - 1; week_list.length < 7; col++) {
            count++;
            week_list[col] = count;
        }
    } else {
        // 其余普通日期;
        for (var col = 0; col < 7; col++) {
            count++;
            week_list.push(count);
            if (count === allDays) {
                count = 0;
            }
        }
    }
    month_list.push(week_list);
}

// 补齐第一周的天数;
// 缺少的天数 => start - 1 ;
console.log(i = start);
for (var i = start - 2; i >= 0; i--) {
    month_list[0][i] = lastMonthEnd--;
}

content.innerHTML = render(month_list)

// console.log(month_list);
// 这个月有多少天;
function getMonthDays(month, year) {
    var d = new Date();
    // 因为年份是可选参数所以如果存在就设置年份,如果不存在就不设置;
    year ? d.setFullYear(year) : "";
    d.setMonth(month);
    d.setDate(0);
    return d.getDate();
}

function render(list) {
    var html = "";
    for (var i = 0; i < list.length; i++) {
        html += "<div class=row>";
        for (var k = 0; k < list[i].length; k++) {
            if (i === 0 && list[i][k] > 7) {
                html += "<span style='color:#ddd;'>" + list[i][k] + "</span>"
            } else if (i > 3 && list[i][k] < 14) {
                html += "<span style='color:#ddd;'>" + list[i][k] + "</span>"
            } else {
                html += "<span>" + list[i][k] + "</span>"
            }
        }

        html += "</div>";
    }
    return html;
}