用JS来做一个简单的日历吧

作者: DarksidersJC | 来源:发表于2016-11-28 19:13 被阅读0次

用JS来做一个简单的日历吧
2018-08-25
React-native 日历控件即拿即用
js 简单日历
JS全年日历打印
2019-04-22
vue中文本域限制字数的方法
JavaScript | 365笔记第87天 | 原生JS做轮播
爬虫系列（十）：使用xpath做爬虫
用vscode来调试js文件吧

捕获.PNG

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.today{
background-color: skyblue;
}
table{
text-align: center;
}
</style>
</head>
<body>

<!-- 自动生成日历(包含标签) -->
<script type="text/javascript">
function isLeapYear(year){
    var isLeap = 0;
    if((year%4==0 && year%100!=0)||(year%400==0)){
        isLeap = 1;
    }
    return isLeap;
}

function calendar(aDate){
    var today;
    today = aDate || new Date();
    //var today = new Date();
    var year = today.getFullYear();
    var mon = today.getMonth();
    var day = today.getDate();
    // 生成一个1号的时间用于获取1号是周几
    var d = new Date(year,mon,1);
    var week = d.getDay();

    var monArr = [31,28+isLeapYear(year),31,30,31,30,31,31,30,31,30,31];
    var row = Math.ceil((week + monArr[mon])/7);

    document.write('<table><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>');
    var date = 0,index;
    for(var i=0;i<row;i++){
        document.write("<tr>");
        for(var j=0;j<7;j++){
            index = 7*i+j;
            // 每个月1号根据week后移
            date = index - week + 1;
            (date<=0 || date>monArr[mon])?(date=''):(date = index - week + 1);
            if(date == day){
                document.write('<td class="today">'+date+'</td>');
            }else{
                document.write('<td>'+date+'</td>');
            }

        }
        document.write("</tr>");

    }
    document.write('</table>');
}

calendar();
calendar(new Date(2016,11,28));
calendar(new Date(2017,0,28));


</script>

</body>
</html>