一個js簡單的日曆顯示效果的函數

時間 2019-12-14

標籤一個簡單日曆顯示效果函數欄目 JavaScript 简体版

原文原文鏈接

　　用一個函數簡單的實現一個月份的日曆，效果以下：javascript

　　這個日曆效果有高亮顯示，我實現的思惟比較簡單。css

　　我把上面的日曆效果用表格table生成，分紅兩個部分。html

　　第一個部分：就是前面的第一排，我用一行<tr></tr>顯示，這一部分表示的上個月份留下來的日期和這個月份的日期的混合日期；java

　　第二部分：就是剩下的全部排，這裏我用五行<tr></tr>顯示，這一部分表示的是這個月份和下個月份的日期的混合日期。函數

　　這裏爲何要用6行<tr></tr>來顯示日曆的效果呢？緣由是有的月份跨越了6行，因此爲了兼容全部的月份，只好用6行了。ui

　　下面是代碼：this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>js的日曆</title>
    <meta name="keywords" content="關鍵字列表" />
    <meta name="description" content="網頁描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
        table tr td {
            width:27px;
            text-align:center;
        }
    </style>
    <script type="text/javascript">
    (function(){
        //獲取日曆的函數，參數是年份year和月份Month，默認是今年當月的日曆
    function getcalendar(year,month){
        year = year ? year : new Date().getFullYear();
        //month是0開始到11結束的，獲取當前月份必須加1
        month = month ? month : new Date().getMonth()+1;
        var last = new Date(year,month-1,0);
        var lastdate = last.getDate();//獲取上個月的最大日期
        var lastday = last.getDay();//獲取上個月最大日期的星期幾
        var months = new Date(year,month,0);
        var Maxdate = months.getDate();//獲取這個月最大的日期
        //獲取當前的日期，爲的是高亮顯示當前的日期
        var today = new Date().getDate();
        var thisyear =  new Date().getFullYear();
        var thismonth =  new Date().getMonth()+1;
        var str = '<table><tr style="font-size:21px;font-weight:bold;"><td id="dec">\<</td> <td colspan="5">'+year+'年'+month+'月</td><td id="add">\></td></tr><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
        //獲取上個月在這個月份中存在的最後日期
        var remainlastdate = lastdate - lastday;
        var t = 1;
        str += '<tr>';
        for(var g=0;g<=6;g++){
        //星期是從0開始到6結束的，小於等於上個月最大星期的日期則是上個月的日期
            if(g <= lastday){
                str +='<td>'+ remainlastdate++ +'</td>';
            }else{
                //高亮顯示當前日期
                if(thisyear == year && thismonth == month && today == t){
                    str +='<td style="color:red;">'+ t++ +'</td>';
                //假如不是當前月份則默認1爲高亮日期
                }else if((thisyear != year && t == 1) || (thismonth != month && t == 1)){
                    str +='<td style="color:red;">'+ t++ +'</td>';
                }else{
                //該月份的普通日期
                    str +='<td style="color:blue;">'+ t++ +'</td>';
                }
            }
        }
        str += '</tr>';
        //除去上面的部分，這個月從哪裏開始
        var remainlastday = 6 - lastday + 1;
        var nextMonthday = 1;//下一個月份的開始日期
        //這裏i最大值爲5是爲了兼容全部的月份，有的月份可能跨越6個tr
        for(var i=1;i<=5;i++){
            str += '<tr>';
            for(var j=0;j<7;j++){
                if(remainlastday <= Maxdate){
                    if(thisyear == year && thismonth == month && today == remainlastday){
                    str +='<td style="color:red;">'+ remainlastday++ +'</td>';
                    }else{
                        if((thisyear != year && remainlastday == 1) || (thismonth != month && remainlastday == 1)){
                            //剩下的天數從這裏開始的話，默認的第一天仍是爲紅色
                            str +='<td style="color:red;">'+ remainlastday++ +'</td>';
                        }else{
                            str +='<td style="color:blue;">'+ remainlastday++ +'</td>';
                        }
                    }
                }else{
                    str +='<td>'+ nextMonthday++ +'</td>';
                }
            }
            str += '</tr>';
        }
        str +='</table>';
        return str;
    }
    return window.calendar=getcalendar;
    })();
    document.write(calendar(2018,1));
    </script>
</head>
<body>
<div id='di'></div>
</body>
</html>