前端学习02：jQuery 日历

引言：学习前端已经接近1个月了，先后经历了1周的 html+css, 2周的“JavaScript 从入门到下跪”，期间还看了vue+webpack。然鹅，Mentor BrightSea 说，想要学好 JavaScript, 并加深对原生语法的认知，不建议前端初学者直接上手像 react 和 vue 这样的框架。所以此次采用 jQuery 写一个小日历，谨作记录。如有问题，还请批评指正。

1.文件结构
1.1 在 html 中写 css 和 JS
1.2 采用 HTML, css 和 JS 文件分开的形式

1.2.1 为什么分开？
三者可以写在同一个文件里。但是，分开写更有优势：
①访问速度会有所不同。从网页面打开的速度来说，外调的js有利于页面主体内容优先加载，然后再执行js，这样能使用户先看到主体内容。
②通用性不同。写在html里,那就只能是这个html页面才能用；而写在html外面，则可以再被其他页面调用，其他页面就不用再次重复写代码。
③代码美观性不同。外调js不混杂在div语言里，容易使网页代码条理清晰，层次分明，即美观又便于维护。

1.2.2 目录结构
进入文件夹，使用 tree 命令在命令行打印如下：$ tree

    ├── calendar.html

    ├── calender.js

    └── calender.scss

使用npm安装完jQuery目录（显示3层）长这样： $ tree -L 3

    ├── calendar.html

    ├── calender.css

    ├── calender.js

    ├── node_modules

    │   └── jquery

    │       ├── AUTHORS.txt

    │       ├── LICENSE.txt

    │       ├── README.md

    │       ├── bower.json

    │       ├── dist //该文件夹下有jquery.js

    │       ├── external

    │       ├── package.json

    │       └── src

    └── package-lock.json

1.2.3 IDE
Sublime/WebStorm.

2.代码
2.1 calendar.html

<!DOCTYPE html>

<!--基于W3C标准 不用做任何修改-->

<html>

<!--起始标准-->

<head>

<!--设置初始化文档信息和文档管理标注-->

<!--整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--名称-->

<title>Calender</title>

<!--链接calender.css文件-->

<link rel="stylesheet" type="text/css" href="calendar.css">

</head>

<body>

    <div data-role="page">

        <div data-role="header"></div>

        <div data-role="content">

            <div class="hkcalendar"></div>

        </div>

        <div data-role="footer">

        </div>

    <!--链接jquery.js文件-->

    <script type="text/javascript" src="../20180724_calendar/node_modules/jquery/dist/jquery.js"></script>

    <!--链接calender.js文件-->

    <script type="text/javascript" src="calendar.js"></script>

    </div>

</body>

</html>

2.2 calender.css

.hkcalendar table {

    margin: 0 auto;

    border-radius: 0.5em;

    border: 0 solid #FFB6C1;

    box-shadow: 0 0 6px 5px #FFB6C1;

}

.hkcalendar table tr td {

    width: 50px;

    height: 34px;

    font-size: 14px;

    font-weight: bolder;

    text-align: center;

    border: 1px solid #DB7093;

    border-radius: 0.5em;

}

.hkcalendar table tr.firsttr td, .hkcalendar table tr.secondtr td

{

    border: 0;

}

table tr.secondtr td:nth-child(1) {

    color: #E13838;

    border-radius: 0 1px 1px ;

    background-color: #FFFFBB;

}

table tr.secondtr td:nth-child(2) {

    color: orange;

    border-radius:0 1px 1px;

    background-color: #FFFFBB;

}

table tr.secondtr td:nth-child(3) {

    color: #C2C200;

    border-radius:0 1px 1px;

    background-color: #FFFFBB;

}

table tr.secondtr td:nth-child(4) {

    color: green;

    border-radius:0 1px 1px;

    background-color: #FFFFBB;

}

table tr.secondtr td:nth-child(5) {

    color: #00D3D3;

    border-radius:0 1px 1px;

    background-color: #FFFFBB;

}

table tr.secondtr td:nth-child(6) {

    color: blue;

    border-radius:0 1px 1px;

    background-color: #FFFFBB;

}

table tr.secondtr td:nth-child(7) {

    color: purple;

    border-radius: 0 1px 1px;

    background-color: #FFFFBB;

}

2.3 calender.js

var currentDate = new Date(); // 获取当前日期

var currentYear = currentDate.getFullYear(); // 年份 2012

var currentMonth = currentDate.getMonth(); // 月份 0-11

var currentDay = currentDate.getDate(); // 今日日期

//打印当前日期，注意：月份返回值是 0（一月） 到 11（十二月） 之间的一个整数

console.log(Date());

console.log("当前日期: "+currentYear+"-"+(currentMonth+1)+"-"+currentDay);

var firstDay = new Date(currentYear, currentMonth, 1); // 当月第一天Date

console.log("当月第一天Date: "+firstDay);

var firstDayOfWeek = firstDay.getDay(); // 当月第一天星期几

console.log("当月第一天星期几: "+firstDayOfWeek);

var numberOfDays = getMonthAllDay(currentMonth, currentYear);

console.log("这个月有几天: "+numberOfDays);

showCanledar(currentMonth, firstDayOfWeek, currentDay, numberOfDays);

reloadYear();

reloadMonth(1);

function reloadYear() {

    var initYearSelect = $("#currentyear option");

    initYearSelect.each(function() {

        if ($(this).val().substring(0, 4) == currentYear) {

            $(this).attr("selected", true);

        }

    });

}

function reloadMonth(isinit) {

    var initMonthSelect = $("#currentmonth option");

    initMonthSelect.each(function() {

        if (isinit == 1) {

            if ($(this).index() == currentMonth) {

                $(this).attr("selected",true);

            }

        } else {

            if ($(this).index() == currentMonth - 1) {

                $(this).attr("selected", true);

            }

        }

    });

}

// 获得下拉列表的年

function getNewYear() {

    // alert("得到年");

    console.log("得到年"+$("#currentyear option:selected").text().substring(0, 4));

    return $("#currentyear option:selected").text().substring(0, 4);

}

// 获得下拉列表的月

function getNewMonth() {

    // alert("得到月");

    return $("#currentmonth option:selected").text();

}

// 为绘制表格做准备

// 是否为闰年

function is_leap(year) {

    return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0)

        : res = (year % 4 == 0 ? 1 : 0));

}

// 获取当月的天数

function getMonthAllDay(month, year) {

    var m_days = new Array(31, 28 + is_leap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

    return m_days[month];

}

// 获得某年某月某日是星期几

function getFirstWeekDay(year, month, day) {

    var date = new Date();

    date.setFullYear(year);

    date.setMonth(month);

    date.setDate(day);

    return date.getDay();

}

// 获得表格行数

function requiredRows(allday, firstday) {

    var rowsOfCalendar = Math.ceil((allday + firstday) / 7);

    return rowsOfCalendar;

}

/* 显示日历 */

function showCanledar(month, firstday, dnow, allday) {

    var rows = requiredRows(allday, firstday);

    var tb = "<table data-role='none' cellpadding='0px' cellspacing='3px' id='dates'>";

    // 表格第一行，显示年月select

    tb += "<tr class='firsttr'><td colspan='7'  align='center'>";

    tb += "<select data-role='none' id='currentyear'>" +

        "<option>2015</option>" +

        "<option>2016</option>" +

        "<option>2017</option>" +

        "<option>2018</option>" +

        "<option>2019</option>" +

        "<option>2020</option></select>";

    tb += "<select data-role='none' id='currentmonth'>" +

        "<option>01</option>" +

        "<option>02</option>" +

        "<option>03</option>" +

        "<option>04</option>" +

        "<option>05</option>" +

        "<option>06</option>" +

        "<option>07</option>" +

        "<option>08</option>" +

        "<option>09</option>" +

        "<option>10</option>" +

        "<option>11</option>" +

        "<option>12</option></select>";

    tb += "</td></tr>";

    // 表格第二行，显示一周7天，从周日开始

    tb += "<tr class='secondtr'>";

    tb += "<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>";

    tb += "</tr>";

    // 打印一个月

    for (var i = 0; i < rows; i++) {

        tb += "<tr>";

        for (var k = 0; k < 7; k++) { // 表格每行的单元格

            var idx = i * 7 + k; // 单元格自然序列号

            var date_str = idx - firstday + 1; // 计算日期

            (date_str <= 0 || date_str > allday) ?  tb+="<td style='background: #FFB6C1'></td>"

                    :     tb += "<td>" +date_str + "</td>"; // 过滤无效日期（小于等于零的、大于月总天数的）

        }

        tb += "</tr>";

    }

    tb += "</table>"; // 表格结束

    $(".hkcalendar").html(tb);

}

/** 改变年后触发事件,jquery1.9版本废除了live()方法，使用on代替* */

var reg = new RegExp("^[0-9]*$");

$(function() {

    $(document).on('change', '#currentyear',function() {

        currentYear = getNewYear();

        currentMonth = getNewMonth();

        commChanged();

        reloadYear();

        reloadMonth(0);

    });

    $(document).on('change','#currentmonth', function() {

        currentMonth = getNewMonth();

        commChanged();

        reloadYear();

        reloadMonth(0);

    });

});

function commChanged() {

    var firstweekday = getFirstWeekDay(currentYear, parseInt(currentMonth) - 1,1);

    var allday = getMonthAllDay(parseInt(currentMonth) - 1, currentYear);

    showCanledar(currentMonth, firstweekday, 9, allday);

}

参考文献：
① jquery制作一个简单的日历

巴特西

前端学习02：jQuery 日历

最新文章

热门文章