用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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容