日曆
在學習javascript過程中，菜鳥教程有一個javascript實例---css日曆，感覺挺有趣的，在它的基礎上增加了一些簡單的功能（差點哭遼）。
功能
按照傳統日曆方式顯示該月的每一天。
可以突出顯示今天的日期
可以翻閱上一個月和下一個月的日曆
實現
step1 傳統日曆佈局樣式：分別將年份與月份、星期、該月的全部天數採用列表佈局，排列組成傳統日曆的樣式。
step2 初始化和更新月份：先將列表清空（debug過程中，有一個發現，初始化的列表便存在的一個childNodes，該項目中需要清空），然後再填入前導空白（為了和星期能夠對應），再填入具體某一個月的天數。
step3 通過document獲取列表對象，改變今天對應行的樣式（className變化）來突出顯示。
其他細節在代碼中實現
代碼
html代碼

CSS日曆

• ❮

• ❯

• August
  2016

CSS代碼

@charset "UTF-8";
* {box-sizing: border-box;}

ul {list-style-type: none;}

body {font-family: Verdana, sans-serif;}

.center { text-align: center; border: 3px solid green; }

.month { padding: 70px 25px; width: 100%; background: #1abc9c; }

.month ul { margin: 0; padding: 0; }

.month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; }

.month .prev { float: left; padding-top: 10px; }

.month .next { float: right; padding-top: 10px; }

.weekdays { margin: 0; padding: 10px 0; background-color: #ddd; }

.weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; }

.days { padding: 10px 0; background: #eee; margin: 0; }

.days li { list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size: 12px; color: #777; }

.days li active { padding: 5px; background: #1abc9c; color: white !important; }

/* Add media queries for smaller screens */
@media screen and (max-width: 720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}

    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}

javascript代碼

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var week = date.getDay();
var p = (week - day + 1 + 35) % 7 + day - 1;
var monthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var monthNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var weekName = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
var aimmonth = month, aimyear = year;

function init() {
    createTitle(year, month);
    var weekdays = document.getElementById("weekdays");
    for (var i = 0; i < 7; i++) {
        var x = document.createElement("LI");
        var t = document.createTextNode(weekName[i]);
        x.appendChild(t);
        weekdays.appendChild(x);
    }
    delDay();
    createDay();
    isnow();
}

function change(x) {
    aimmonth += x;
    if (aimmonth == -1) {
        aimyear -= 1;
        aimmonth = 11;
    } else if (aimmonth == 12) {
        aimyear += 1;
        aimmonth = 0;
    }
    createTitle(aimyear, aimmonth);
    delDay();
    createDay();
    isnow();
}

function createTitle(y, m) {
    document.getElementById("year").innerHTML = y;
    document.getElementById("month").innerHTML = monthName[m];
}

function createDay() {
    var datetmp = new Date();
    datetmp.setFullYear(aimyear, aimmonth, 1);
    var firstday = datetmp.getDay();
    var days = document.getElementById("days");
    for (var i = 0; i < firstday; i++) {
        var x = document.createElement("LI");
        var t = document.createTextNode("");
        x.appendChild(t);
        days.appendChild(x);
    }
    for (var i = 1; i <= getMonthDay(); i++) {
        var x = document.createElement("LI");
        var t = document.createTextNode(i);
        x.appendChild(t);
        days.appendChild(x);
    }
}

function delDay() {
    var list = document.getElementById("days");
    var len = list.childNodes.length;
    for (var i = 0; i < len; i++) {
        list.removeChild(list.childNodes[0]);
    }
}

function isnow() {
    if (aimyear == year && aimmonth == month) {
        days.childNodes[p].style = "padding: 5px;background: #1abc9c;color: white !important;"
    }
}

function getMonthDay() {
    if (aimmonth != 2) {
        return monthNum[aimmonth];
    } else {
        if (aimyear % 4 != 0 || aimyear % 100 == 0 && aimyear % 400 != 0) {
            return monthNum[aimmonth];
        } else return 29;
    }
} //main init();

總結
javascript目前算是起步，最最基礎的皮毛學會了，起碼不會的東西可以通過去找函數，查資料學習，可能實現的有些複雜，但是最終能夠表達出自己的構想，聽開心的。下一步，再寫一些實例去看jquery。
css仍是不足，有些東西可能會有衝突，無法實現想要的東西，仍要回去學基礎的東西，最重要的一點是多練，積累經驗，總結規律和思想。