共计 15957 个字符，预计需要花费 40 分钟才能阅读完成。
js 制作日历插件
本文主要为自己日常学习的 js 代码时参考编写的，主要是看了 vue 的 element 的 ui 库的日历插件后，想要学习与使用，就利用空余时间进行编写，文章有很多不足，麻烦指出，会努力改正
定义对象
首先创建当前对应的日期时间，以及创建三个数组：[‘ 星期数组 ’,’ 月份数组 ’,’ 每个月最后一天是几号 ’]；
var date = new Date(); // 创建日期对象
var nowYear = date.getFullYear(); // 获取当前年份
var nowMonth = date.getMonth() + 1; // 获取当前月份
var nowDay = date.getDate(); // 获取当前天
var splitString = "-"; // 年月日之间的分隔符
var weekDays = new Array("日", "一", "二", "三", "四", "五", "六"); // 星期数组
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); // 月份数组
var lastDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); // 每个月的最后一天是几号
// 变量保存，存储当前选择的年月
var checkYear = nowYear;
var checkMonth = nowMonth;显示控件，并且设置日历显示的位置
function showDate() {createDate(nowYear, nowMonth);// 创建日历
// 计算显示控件位置
/////// 获取当前输入框的位置，在实际操作中需要修改此处 ID
var x = document.getElementById('txt_calendar').offsetLeft;
var y = document.getElementById('txt_calendar').offsetTop + 22;
document.getElementById('dateOuter').style.left = x + "px";
document.getElementById('dateOuter').style.top = y + "px";
document.getElementById('dateOuter').style.display = "";
}渲染日历
// 日历最外层 div 样式
var outerStyle = "display: none;position: absolute;width: 314px;margin-top:10px;border: 1px solid #F7F7F7;border-radius: 5px;background-color: #F7F7F7;color: #4eccc4;padding-bottom: 20px;";
// 日历控件最外层 div
document.write('<div style="' + outerStyle + '"id="dateOuter"></div>')1. 创建日历样式，创建当前日期，删除，上一月，下一月，选择年月按钮
function createDate(thisYear, thisMonth) {
var createDoc = '<div style="height: 30px;">';
// 当前年月日，点击此处日历自动跳到当前日期
createDoc += '<p style="width: 100%;height: 30px;text-align: center;color: #999;"onclick="getThisDay()"> 当前日期' + nowYear + "年" + nowMonth + "月" + nowDay + "号";
// 关闭日历显示
createDoc += '<span id="closeDate"onClick="hidDate()"style="float: right;font-size: 25px;margin: -20px 3px 0 0;cursor: pointer;">×</span></p></div>';;
createDoc += '<div style="margin-bottom: 8px;">';
// 上一月
createDoc += '<span id="lastMonth"onclick="lastMonthClick()"style="margin: 0 20px 0 25px;cursor:pointer;"><</span>';
// 创建年份下拉框 [1900-2099] 年
createDoc += '<select id ="selectYear"class="selectStyle"onchange="changeYearAndMonth()">';
for(var i = 1900; i <= 2099; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
createDoc += "</select> 年";
// 创建月份下拉框
createDoc += '<select id ="selectMonth"class="selectStyle"onchange="changeYearAndMonth()">';
for(var i = 1; i <= 12; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
createDoc += "</select> 月";
// 下一月
createDoc += '<span id="nextMonth"onClick="nextMonthClick()"style="float: right;margin-right: 25px;cursor:pointer;">></span></div>';
// 创建星期
createDoc += '<div class="everyWeekDay">';
for(var i = 0; i < weekDays.length; i++) {if(weekDays[i] == "日" || weekDays[i] == "六") {createDoc += '<span class="weekday"style="color:red;">' + weekDays[i] + '</span>'
} else {createDoc += '<span class="weekday">' + weekDays[i] + '</span>'
}
}
createDoc += '</div>';2. 创建每月天数：如果当前不是星期天，会自动创建空白位，修改优化后改为前一个月日期
createDoc += '<div class="everyDay"><div class="marginTop">'; // 日期样式 DIV
var thisWeek = getThisWeekDay(thisYear, thisMonth, 1); // 算出当前年月 1 号是星期几
/*
* 如果当前不是星期天, 创建空白日期占位
* 若是星期天，则循环输出当月天数
* 待修改优化，后期改为变色的前一个月日期
*/
if(thisWeek != 0) {for(var i = 0; i < thisWeek; i++) {createDoc += '<span class="days"></span>';}
}
// 循环输出当月天数
//getThisMonthDay()获取当月天数
for(var i = 1; i < getThisMonthDay(thisYear, thisMonth) + 1; i++) {if(thisYear==nowYear && thisMonth == nowMonth && i== nowDay){
// 今天的显示
if(getThisWeekDay(thisYear,thisMonth,i) == 6 || getThisWeekDay(thisYear,thisMonth,i) == 0){
// 今天是周末
createDoc+='<span onclick="setInput('+i+')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">'+i+'</span>';
}else{createDoc+='<span onClick="setInput('+i+')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">'+i+'</span>';
}
}else{
// 周末变为红色
if(getThisWeekDay(thisYear,thisMonth,i)==6 || getThisWeekDay(thisYear,thisMonth,i)==0){createDoc+='<span id="weekends"onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="color:red;cursor:pointer;">'+i+'</span>';
}else{createDoc+='<span onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="cursor:pointer;">'+i+'</span>';
}
}
// 星期六换行
if(getThisWeekDay(thisYear,thisMonth,i)==6){createDoc+="</tr>";}
}
createDoc += '</div></div>';监听事件
1. 跳转到当前日
// 跳转到当前日
function getThisDay(){
checkYear = nowYear;
checkMonth = nowMonth;
createDate(checkYear,checkMonth);
} 2. 跳转上一个月
// 上一个月
function lastMonthClick(){
// 若当前是 1 月份，年份减一，月份变为 12
if(checkMonth == 1){
checkYear = checkYear - 1;
checkMonth = 12;
}else{checkMonth = checkMonth - 1;}
// 创建当前月份日期
createDate(checkYear,checkMonth);
}3. 跳转下一个月
// 下一月
function nextMonthClick(){
// 若当前是 12 月份，年份加 1，月份变为 1
if(checkMonth == 12){
checkYear = checkYear + 1;
checkMonth = 1;
}else{checkMonth = checkMonth + 1;}
// 创建当前月份日期
createDate(checkYear,checkMonth);
}4. 年月下拉框
function changeYearAndMonth(){checkYear = document.getElementById('selectYear').value;
checkMonth = document.getElementById('selectMonth').value;
createDate(checkYear,checkMonth);
} 5. 判断是否为闰年（闰年可以被 4 整除且不能被 100 整除，或者能整除 400）
function isLeapYear(year) {
var isLeap = false;
if(0 == year % 4 && ((year % 100 != 0) || (year % 400 == 0))) {
// 闰年可以被 4 整除且不能被 100 整除，或者能整除 400
isLeap = true;
}
return isLeap;
}6. 获取某月份的总天数
function getThisMonthDay(year, month) {var thisDayCount = lastDays[month - 1]; // 获取当前月份的天数
if((month == 2) && isLeapYear(year)) {
// 若当前月份为 2 月，并且是闰年，天数加 1
thisDayCount++;
}
return thisDayCount;
}7. 计算某天是星期几
function getThisWeekDay(year, month, date) {
// 将年月日创建 Date 对象，返回当前星期几
var thisDate = new Date(year, month - 1, date);
return thisDate.getDay();}8. 鼠标的移入移出
// 鼠标移进时
function mouseOver(obj){if(obj.id == "weekends"){
// 若为周末，边框样式为红色
obj.style.border="1px solid red";
}else{obj.style.border="1px solid #4eccc4";}
}
// 鼠标移出时，边框恢复原色
function mouseOut(obj){obj.style.border="1px solid #F7F7F7";}8. 关闭日历
function hidDate(){document.getElementById('dateOuter').style.display = "none";
}9. 键盘操作，左右控制年份，空格返回当前月份
document.onkeydown=function(e){
/*
* 浏览器兼容性
* ie 的 document 对象有一个 all 属性，它的里面存放了页面的所有标签，而其它浏览器是没有的，所以在 ie 中，事件对象的传播会绑定在全局的 windows 上，所以 ie 浏览器肯定是都支持 window.event
* firefox 只支持事件对象作为参数传入，而这又恰恰是 ie6/ie7/ie8 所无法实现的，所以可以成功的区分这两类
* ie9/chrome/opera/safari，则两种方式都支持
* var e = event?event||window.event 可以保证各浏览器的兼容的
*/
var thisEvent = e || window.event;
var keyCode = thisEvent.keyCode || thisEvent.which;
// 若控件是隐藏状态
if(document.getElementById('dateOuter').style.display == "none"){return false;}
switch(keyCode){
case 32:// 空格，返回当前日期
getThisDay();break;
case 27://Esc，关闭日历插件
hiddenCal();break;
case 37://left，向左
lastMonthClick();break;
case 39://right，向右
nextMonthClick();break;}
}10. 模拟 windows7 日历 鼠标滑轮滚动翻页
主要火狐浏览器与其他内容浏览器不同点在于【e || window.event;】；
- Firefox 接收 +3 和 -3
- 其他浏览器接收 +120 和 -120
- 其中 + 数表示鼠标向上滑动，- 数表示向下滑动
var direct;
var scrollFunc=function(e){
// 浏览器兼容
var thisEvent = e || window.event;
//IE,Opera,Chrome,safari
if(thisEvent.wheelDelta){direct = thisEvent.wheelDelta;}
else if(thisEvent.detail){
//Firefox
direct = thisEvent.detail;
}
// 如果控件是隐藏状态
if(document.getElementById('dateOuter').style.display == "none"){return false;}
/*
* Firefox 接收 +3 和 -3
* 其他浏览器接收 +120 和 -120
* 其中 + 数表示鼠标向上滑动，- 数表示向下滑动
*/
// 向上滑动，调用上一个月
if(direct=="120" || direct=="3"){lastMonthClick();
// 向下滑动，调用下一个月
}else if(direct=="-120" || direct=="-3"){nextMonthClick();
}
}注册监听事件
if(document.addEventListener){if(myBrowser() == "FF"){
//Firefox,DOMMouseScroll 滚动事件只有 Firefox 适用
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}else{
//Chrome,360,safari,Opera 适用 mousewheel 滚动事件
document.addEventListener('mousewheel',scrollFunc,false);
}
}else{
// 兼容 IE，测试 IE8 可以兼容
document.onmousewheel = scrollFunc;
}
// 判断浏览器类型
function myBrowser(){
var userAgent = navigator.userAgent; // 取得浏览器的 userAgent 字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {return "Opera"}; // 判断是否 Opera 浏览器
if (userAgent.indexOf("Firefox") > -1) {return "FF";} // 判断是否 Firefox 浏览器
if (userAgent.indexOf("Chrome") > -1){return "Chrome";}
if (userAgent.indexOf("Safari") > -1) {return "Safari";} // 判断是否 Safari 浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {return "IE";}; // 判断是否 IE 浏览器
if (userAgent.indexOf("Trident") > -1) {return "Edge";} // 判断是否 Edge 浏览器
}这个就是实现了日历插件的实现，但是未完成封装，后续会进行封装后在写一篇记录开发流程。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 日历显示 </title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
.everyWeekDay .weekday, .everyDay .days { /* 解决 span 不支持 width 属性 */
display: -moz-inline-box;
display: inline-block;
margin: 5px 0 0 20px;
text-align: center;
width: 20px;
border: 1px solid #F7F7F7;
cursor: pointer;
}
.marginTop {margin-top: 5px;}
.selectStyle {
padding-left: 10px;
border: none;
border-radius: 3px;
outline: none;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
margin: 0 10px 0 10px;
width: 60px;
border-color: #0FB9EF;
color: #0FB9EF;
}
</style>
<body>
<input type="text" id="txt_calendar"
style="margin-left: 20px;margin-top: 20px;background-color: #cfcfcf;border: none;border-radius: 5px;height: 25px;padding-left: 10px;outline:none;"
readonly="readonly" onfocus="showDate()"/>
</body>
<script type="text/javascript">
/**
* js 生成日历
*/
var date = new Date(); // 创建日期对象
var nowYear = date.getFullYear(); // 获得当前年份
var nowMonth = date.getMonth() + 1; // 获得当前月份
var nowDay = date.getDay(); // 当天
var splitString = '-'; // 分隔符
var weekDays = new Array('日','一','二','三','四','五','六'); // 星期数组
var months = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');// 月份数组
var lastDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); // 每个月最后一天是几号
// 变量保存，存储当前选择的年月
var checkYear = nowYear;
var checkMonth = nowMonth;
// 将选择的日期添加到输入框
function setInput(selectDay) {document.getElementById('txt_calendar').value = checkYear + splitString + checkMonth + splitString + selectDay;
}
// 显示控件
function showDate() {createDate(nowYear,nowMonth); // 创建日历
// 显示控制位置
var x = document.getElementById('txt_calendar').offsetLeft;
var y = document.getElementById('txt_calendar').offsetTop + 22;
document.getElementById('dateOuter').style.left = x + "px";
document.getElementById('dateOuter').style.top = y + "px";
document.getElementById('dateOuter').style.display = "";
}
/**
* 拼接日历框, 并且定位日历框
*/
// 最外层样式
var outetStyle = 'display: none;position: absolute;width: 314px;margin-top:10px;border: 1px solid #F7F7F7;border-radius: 5px;background-color: #F7F7F7;color: #4eccc4;padding-bottom: 20px;';
// 日历外层
document.write('<div style="'+ outetStyle+'"id="dateOuter"></div>');
// 创建日历样式
function createDate(thisYear,thisMonth) {
var createDoc = '<div style="height: 30px;">';
// 当前年月日，点击此处日历自动跳到当前日期
createDoc += '<p style="width: 100%;height: 30px;text-align: center;color: #999;"onclick="getThisDay()"> 当前日期' + nowYear + "年" + nowMonth + "月" + nowDay + "号";
// 关闭日历显示
createDoc += '<span id="closeDate"onClick="hidDate()"style="float: right;font-size: 25px;margin: -20px 3px 0 0;cursor: pointer;">×</span></p></div>';
createDoc += '<div style="margin-bottom: 8px;">';
// 上个月
createDoc += '<span id="lastMonth"onclick="lastMonthClick()"style="margin: 0 20px 0 25px;cursor:pointer;"><</span>';
// 创建年份下拉框 [1900-2099] 年
createDoc += '<select id ="selectYear"class="selectStyle"onchange="changeYearAndMonth()">';
for(var i = 1900; i <= 2099; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
createDoc += "</select> 年";
// 创建月份下拉框
createDoc += '<select id ="selectMonth"class="selectStyle"onchange="changeYearAndMonth()">';
for(var i = 1; i <= 12; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
createDoc += "</select> 月";
// 下一月
createDoc += '<span id="nextMonth"onClick="nextMonthClick()"style="float: right;margin-right: 25px;cursor:pointer;">></span></div>';
// 创建星期
createDoc += '<div class="everyWeekDay">';
for(var i = 0; i < weekDays.length; i++) {if(weekDays[i] == "日" || weekDays[i] == "六") {createDoc += '<span class="weekday"style="color:red;">' + weekDays[i] + '</span>'
} else {createDoc += '<span class="weekday">' + weekDays[i] + '</span>'
}
}
createDoc += '</div>';
// 创建每天天数
createDoc += '<div class="everyDay"><div class="marginTop">'; // 日期样式 DIV
var thisWeek = getThisWeekDay(thisYear, thisMonth, 1); // 算出当前年月 1 号是星期几
/*
* 如果当前不是星期天, 创建空白日期占位
* 若是星期天，则循环输出当月天数
* 待修改优化，后期改为变色的前一个月日期
*/
if(thisWeek != 0) {for(var i = 0; i < thisWeek; i++) {createDoc += '<span class="days"></span>';}
}
// 循环输出当月天数
//getThisMonthDay()获取当月天数
for(var i = 1; i < getThisMonthDay(thisYear, thisMonth) + 1; i++) {if (thisYear == nowYear && thisMonth == nowMonth && i == nowDay) {if (getThisWeekDay(thisYear, thisMonth, i) == 6 || getThisWeekDay(thisYear, thisMonth, i) == 0) {
// 今天是周末
createDoc += '<span onclick="setInput('+ i +')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">' + i + '</span>';
} else {createDoc += '<span onClick="setInput('+ i +')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">' + i + '</span>';
}
}else {
// 周末变为红色
if(getThisWeekDay(thisYear,thisMonth,i)==6 || getThisWeekDay(thisYear,thisMonth,i)==0){createDoc+='<span id="weekends"onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="color:red;cursor:pointer;">'+i+'</span>';
}else{createDoc+='<span onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="cursor:pointer;">'+i+'</span>';
}
}
// 星期六换行
if(getThisWeekDay(thisYear,thisMonth,i)==6){createDoc+="</tr>";}
}
createDoc += '</div></div>';
// 将创建好的控件字符串添加到 div 中
document.getElementById('dateOuter').innerHTML = createDoc;
// 默认选择当前年份
document.getElementById('selectYear').value = thisYear;
// 默认选择当前月
document.getElementById('selectMonth').value = thisMonth;
}
// 跳转到当前日
function getThisDay(){
checkYear = nowYear;
checkMonth = nowMonth;
createDate(checkYear,checkMonth);
}
// 上一个月
function lastMonthClick(){
// 若当前是 1 月份，年份减一，月份变为 12
if(checkMonth == 1){
checkYear = checkYear - 1;
checkMonth = 12;
}else{checkMonth = checkMonth - 1;}
// 创建当前月份日期
createDate(checkYear,checkMonth);
}
// 下一月
function nextMonthClick(){
// 若当前是 12 月份，年份加 1，月份变为 1
if(checkMonth == 12){
checkYear = checkYear + 1;
checkMonth = 1;
}else{checkMonth = checkMonth + 1;}
// 创建当前月份日期
createDate(checkYear,checkMonth);
}
// 年月下拉框
function changeYearAndMonth(){checkYear = document.getElementById('selectYear').value;
checkMonth = document.getElementById('selectMonth').value;
createDate(checkYear,checkMonth);
}
// 判断是否为闰年
function isLeapYear(year) {
var isLeap = false;
if(0 == year % 4 && ((year % 100 != 0) || (year % 400 == 0))) {
// 闰年可以被 4 整除且不能被 100 整除，或者能整除 400
isLeap = true;
}
return isLeap;
}
// 获取某月份的总天数
function getThisMonthDay(year, month) {var thisDayCount = lastDays[month - 1]; // 获取当前月份的天数
if((month == 2) && isLeapYear(year)) {
// 若当前月份为 2 月，并且是闰年，天数加 1
thisDayCount++;
}
return thisDayCount;
}
// 计算某天是星期几
function getThisWeekDay(year, month, date) {
// 将年月日创建 Date 对象，返回当前星期几
var thisDate = new Date(year, month - 1, date);
return thisDate.getDay();}
// 鼠标移进时
function mouseOver(obj){if(obj.id == "weekends"){
// 若为周末，边框样式为红色
obj.style.border="1px solid red";
}else{obj.style.border="1px solid #4eccc4";}
}
// 鼠标移出时，边框恢复原色
function mouseOut(obj){obj.style.border="1px solid #F7F7F7";}
// 关闭日期选择框
function hidDate(){document.getElementById('dateOuter').style.display = "none";
}
// 控制键盘操作，左右控制月份，空格返回当前日期
document.onkeydown=function(e){
/*
* 浏览器兼容性
* ie 的 document 对象有一个 all 属性，它的里面存放了页面的所有标签，而其它浏览器是没有的，所以在 ie 中，事件对象的传播会绑定在全局的 windows 上，所以 ie 浏览器肯定是都支持 window.event
* firefox 只支持事件对象作为参数传入，而这又恰恰是 ie6/ie7/ie8 所无法实现的，所以可以成功的区分这两类
* ie9/chrome/opera/safari，则两种方式都支持
* var e = event?event||window.event 可以保证各浏览器的兼容的
*/
var thisEvent = e || window.event;
var keyCode = thisEvent.keyCode || thisEvent.which;
// 若控件是隐藏状态
if(document.getElementById('dateOuter').style.display == "none"){return false;}
switch(keyCode){
case 32:// 空格，返回当前日期
getThisDay();break;
case 27://Esc，关闭日历插件
hidDate();break;
case 37://left，向左
lastMonthClick();break;
case 39://right，向右
nextMonthClick();break;}
}
/* 模拟 windows7 日历 鼠标滑轮滚动翻页 */
var direct;
var scrollFunc=function(e){
// 浏览器兼容
var thisEvent = e || window.event;
//IE,Opera,Chrome,safari
if(thisEvent.wheelDelta){direct = thisEvent.wheelDelta;}
else if(thisEvent.detail){
//Firefox
direct = thisEvent.detail;
}
// 如果控件是隐藏状态
if(document.getElementById('dateOuter').style.display == "none"){return false;}
/*
* Firefox 接收 +3 和 -3
* 其他浏览器接收 +120 和 -120
* 其中 + 数表示鼠标向上滑动，- 数表示向下滑动
*/
// 向上滑动，调用上一个月
if(direct=="120" || direct=="3"){lastMonthClick();
// 向下滑动，调用下一个月
}else if(direct=="-120" || direct=="-3"){nextMonthClick();
}
};
// 注册监听事件
if(document.addEventListener){if(myBrowser() == "FF"){
//Firefox,DOMMouseScroll 滚动事件只有 Firefox 适用
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}else{
//Chrome,360,safari,Opera 适用 mousewheel 滚动事件
document.addEventListener('mousewheel',scrollFunc,false);
}
}else{
// 兼容 IE，测试 IE8 可以兼容
document.onmousewheel = scrollFunc;
}
// 判断浏览器类型
function myBrowser(){
var userAgent = navigator.userAgent; // 取得浏览器的 userAgent 字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {return "Opera"}; // 判断是否 Opera 浏览器
if (userAgent.indexOf("Firefox") > -1) {return "FF";} // 判断是否 Firefox 浏览器
if (userAgent.indexOf("Chrome") > -1){return "Chrome";}
if (userAgent.indexOf("Safari") > -1) {return "Safari";} // 判断是否 Safari 浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {return "IE";}; // 判断是否 IE 浏览器
if (userAgent.indexOf("Trident") > -1) {return "Edge";} // 判断是否 Edge 浏览器
}
</script>
</html>github 地址：https://github.com/panpanxiong3/Front-end-effect-link
里面有许多自我练习的 js 方法，主要从网络上收集，并且参考动手制作，并添加注释，来提高自己的能力
正文完