前端学习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'>";// 表格第一行，显示年月selecttb += "<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 日历相关推荐

前端学习：jQuery学习--Day03
前端学习:jQuery学习–Day03 ps:这几天偷了点懒呜呜外加考试耽误了几天学习最后自己做了一个给女朋友的惊喜点滴记录note 大纲自定义事件自动触发事件委托鼠标移入移出事件电影排行 ...
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标继续学习jQuery框架剩余的内容. 文章目录今日学习目标学习内容一.jQuery操作标签 class操作样式操作位置操作文本值操作属性操作文档处理操作二.jQuery ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
前端学习——初识jQuery
学习目标: 知道什么是 jQuery 了解 jQuery 的优点能够简单使用 jQuery 一.什么是 jQuery 1.jQuery 介绍 JavaScript库:即 library,是一个封装好 ...
第四篇前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
web前端学习笔记——JQuery
web前端开发基础第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...
前端学习之jQuery
1. 首先在页面顶端增加一行script元素,然后写上结束符.浏览器会运行script 里所有的Javascript,包括jQuery. 在script里,添加这个方法:$(document).rea ...
web前端学习day_04:jQuery框架
jQuery框架作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率 jQuery就是一个通过js语言所以写的框架由于jQuery框架就是js语言所写,引入 ...
web前端学习总结--JQuery
jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器使用户 ...

前端学习02：jQuery 日历

前端学习02：jQuery 日历相关推荐

最新文章

热门文章