前端学习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.json1.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 日历的更多相关文章
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- 前端学习之-- Jquery
Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...
- 前端学习之jquery（二）
操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...
- web前端学习总结--JQuery
jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户 ...
- 前端学习之三——jquery选择器
Jquery中的选择器分为几大类:基本过滤选择器,层次选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象选择器和表单对象属相过滤选择器. 1.非基本过滤选择器,一般需 ...
- jQuery 源码学习 - 02 - jQuery.fn.extend 与 jQuery.extend
参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. extend 方法在 jQuery 中是一个很重要的方法.jQuery 内部用它来拓展静态方法或者 ...
- web前端开发学习：jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
随机推荐
- linux多进/线程编程（4）——进程间通信之pipe和fifo
前言: Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到,所以进程和进程之间不能相互访问,要交换数据必须通过内核,在内核中开辟一块 ...
- LeetCode-071-简化路径
简化路径 题目描述:给你一个字符串 path ,表示指向某一文件或目录的 Unix 风格 绝对路径 (以 '/' 开头),请你将其转化为更加简洁的规范路径. 在 Unix 风格的文件系统中,一个点(. ...
- postman-接口测试常用test模块
一.配置环境变量区分不同运行环境(开发.测试.生产等). 对接口进行测试时,不同环境往往对应不同的域名或IP,在Postman里一个接口域名相同但因为地址不同重复写多次很明显是愚蠢的做法,下面我们可以 ...
- 【python】GUI笔记
1.Scrapy dmoz开放式人工目录.(1)创建项目:cmd-cd desktop Scrapy startproject pachong(2)parse接收 2.python如何实时爬取数据 3 ...
- js数组和对象的区别,ajax传入多个参数值,ajax传多个数组数据
数组分为索引数组和关联数组 js中先声明一个空数组 arr = [] 索引数组 索引是整数,如arr[0] = 'a' 关联数组 索引是自定义的字符串,如arr['a'] = 'a' js中的对象 你 ...
- Navicat for MySQL 安装软件和破解补丁
软件 链接:https://pan.baidu.com/s/1e8gpbyWM7ISrWpMwsw-MNg 提取码:fag3 安装好 Navicat 将破解文件放到安装目录下,然后双节运行 是的,你 ...
- C++ 接口的实现方式
一.接口的定义 有时候,我们得提供一些接口给别人使用.接口的作用,就是提供一个与其他系统交互的方法.其他系统无需了解你内部细节,并且也无法了解内部细节,只能通过你提供 给外部的接口来与你进行通信.根据 ...
- selenium&火狐驱动安装及兼容性处理
1.selenium安装 安装:pip install selenium==3.7.0 卸载: pip uninstall selenium 查看版本号:pip show selenium 2.火 ...
- js 中的值类型和引用类型
javascript中值类型(基本类型):number,string,bool,undefined,null(这5种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值) 引用类型:对象(Ob ...
- Linux TC 流量控制介绍
前段时间在做一些测试的时候接触到了Linux tc,因为需要对数据包添加延迟,用到了tc中的netem.添加简单的延迟非常简单,像这样一条命令就搞定了:$ tc qdisc add dev eth0 ...