最近看了好多人都在写博客日历，再搭配一个小小的日历效果，感觉非常的酷，于是便也尝试用这种方式记录自己每天的经历，确实是个不错的主意。于是便拔了一个大佬的日历效果分享给大家吧！

效果

食用方法

直接在写博文的时候加入以下代码即可。

!!!
<div id="calendar"></div>
<style>.today{background-color:#efefef}#calendar a,#calendar a:hover{display:block;border: 0 !important;}</style>
<script>
function isLeap(year) {return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}
function calendar() {var i, k, today = new Date("2019/07/01"),
    y = today.getFullYear(),
    m = today.getMonth(),
    d = new Date().getDate(),
    firstday = new Date(y, m, 1),
    dayOfWeek = firstday.getDay(),
    days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
    daytext = "",
    str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);
    daytext = "<table ><tr><th> 日曜日 </th><th> 月曜日 </th><th> 水曜日 </th><th> 火曜日 </th><th> 木曜日 </th><th> 金曜日 </th><th> 土曜日 </th></tr>";
    for (i = 0; i < str_nums; i += 1) {
        daytext += "<tr>";
        for (k = 0; k < 7; k++) {
            var idx = 7 * i + k;
            var date = idx - dayOfWeek + 1;
            if (date <= 0 || date > days_per_month[m]) {
                date = " ";
                r = "";
            } else {
                date = idx - dayOfWeek + 1;
                r = " 日 ";
            }
            if (date == d) {daytext += '<td class="today"><a onclick="scrollt('+date+'); return false;">' + date + r + "</a></td>";
            } else {daytext += '<td><a onclick="scrollt('+date+'); return false;">' + date + r + "</a></td>";
            }
        }
        daytext += "</tr>";
    }
    daytext += "</table>";
    document.getElementById("calendar").innerHTML = daytext;
}calendar();
</script>
!!!

然后具体在几号的日记用以下代码

效果

23 日

今天看了很多大佬都用这种方法写日记，于是便扒了下来，效果还不错！

食用方法

!!!
<h1 id="23">23 日 </h1>
!!!

以上代码来自博客Kiosr