前端进修02：jQuery 日历

2024年1月12日 235次阅读 来源: 5PU7N1KK

弁言：进修前端已靠近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制造一个简朴的日历

    原文作者：5PU7N1KK
    原文地址: https://segmentfault.com/a/1190000015719958
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞