JavaScript实现简单的日历效果
更新时间：2016年09月25日 15:38:53 作者：tianzitianxie
本文给大家分享的是一个简单的JavaScript制作的日历模板，小伙伴们可以根据自己的需求，继续补充，希望大家能够喜欢
只是个简单的日历模板，各位可根据需要自行添加需要的功能。该模板更多的是提供了关于年、月、日、月初、月末、星期的获取函数。各位可根据需要自行获取。欢迎提供更简便的方式方法，互相学习提高！谢谢~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历</title>
<style type="text/css">
* {
cursor: default;
}
div {
overflow: hidden;
}
.mainArea {
margin: 30px auto 0;
border: 1px solid #666;
height: 230px;
width: 210px;
background-color: #eee;
font-family: 'microsoft yahei';
}
.top {
height: 30px;
background-color: #aaa;
}
.top span {
cursor: default;
}
.top span:hover {
background-color: red;
}
.top .selectFlagLeft span,
.top .selectFlagRight span {
display: block;
float: left;
line-height: 30px;
text-align: center;
}
.top span.selectFlag {
width: 50%;
}
.top span.selectYear {
width: 60px;
height: 30px;
display: block;
float: left;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.top span.selectMonth {
display: block;
height: 30px;
margin-left: 60px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.top .selectFlagLeft {
float: left;
width: 60px;
height: 30px;
}
.top .selectFlagRight {
float: right;
width: 60px;
height: 30px;
margin-top: -30px;
}
.top .selectMiddle {
height: 30px;
margin-left: 60px;
margin-right: 60px;
}
.dayTb {
width: 100%;
text-align: center;
border-bottom: 1px solid #fff;
~display: none;
}
.dayTb thead {
background-color: #675;
color: #eee;
}
.dayTb tr {
height: 24px;
}
.dayTb td {
border: 1px solid #ddd;
cursor: default;
background-color: #dadada;
font-weight: 100;
color: rgba(102, 102, 102, 0.6);
}
/* .dayTb td:hover, */
.dayTb td.currentMonth:hover,
.dayTb td.currentMonth.currentDay:hover,
.dayTb td.currentMonth.week:hover {
background-color: #0fa;
}
.dayTb td.currentMonth {
background-color: #c0f0f0;
color: #60f;
}
.dayTb td.currentMonth.currentDay {
color: #f06;
}
.dayTb td.currentMonth.week {
color: #00a080;
}
.footer {
line-height: 27px;
text-align: right;
padding-right: 5px;
}
.footer span {
border: 1px solid #bbb;
padding: 2px 5px;
font-size: 12px;
}
.selectYears {
height: 168px;
width: 100%;
background-color: #333;
text-align: center;
display: none;
}
.selectYears {
color: #fff;
margin: 0;
padding: 0;
}
.selectYears .contentYears span {
font-size: 16px;
padding: 7px 0;
width: 25%;
display: block;
float: left;
}
.selectYears span:hover {
background-color: red;
}
.selectFooter span{
padding: 0 6px;
}
.selectYears .returnPage {
font-size: 12px;
display: block;
float: right;
margin-top: -22px;
margin-right: 10px;
padding: 2px 6px;
}
</style>
</head>
<body>
<div class="mainArea">
<div class="top">
<div class="selectFlagLeft">
<span class="selectFlag" id="prevYear">◄</span>
<span class="selectFlag" id="prevMonth"><</span>
</div>
<div class="selectMiddle">
<span class="selectYear" id="selectYear">
</span>
<span class="selectMonth" id="selectMonth">
</span>
</div>
<div class="selectFlagRight">
<span class="selectFlag" id="nextMonth">></span>
<span class="selectFlag" id="nextYear">►</span>
</div>
</div>
<table class="dayTb" id="dayTb" border=0 cellspacing=0 cellpadding=0>
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="selectYears">
<div class="contentYears">
<span>2015</span>
<span>2014</span>
<span>2013</span>
<span>2012</span>
<span>2011</span>
<span>2010</span>
<span>2009</span>
<span>2008</span>
<span>2007</span>
<span>2006</span>
<span>2005</span>
<span>2004</span>
<span>2003</span>
<span>2002</span>
<span>2001</span>
<span>2000</span>
</div>
<div class="selectFooter">
<span>←</span>
<span>→</span>
</div>
<span class="returnPage">收起</span>
</div>
<div class="footer">
<span>今日</span>
<span>清除</span>
<span>确定</span>
<span>返回</span>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
/**
* 时间数组
*/
Date.prototype.toArray = function()
{
var now = this;
var dateAry = Array();
dateAry[0] = now.getFullYear();
dateAry[1] = (now.getMonth()+1<10?"0":"")+(now.getMonth()+1);
dateAry[2] = (now.getDate()<10?"0":"")+now.getDate();
dateAry[3] = (now.getHours()<10?"0":"")+now.getHours();
dateAry[4] = (now.getMinutes()<10?"0":"")+now.getMinutes();
dateAry[5] = (now.getSeconds()<10?"0":"")+now.getSeconds();
dateAry[6] = now.getDay();
return dateAry;
};
/**
* 当月最大天数
*/
function getMaxDayOfMonth(iYear, iMonth) {
var newDate = new Date(iYear,iMonth,0);
var dateAry = newDate.toArray();
return parseInt(dateAry[2]);
};
/**
* 当月第一天是周几
*/
function getFirstDay(iYear, iMonth) {
var newDate = new Date(iYear,iMonth,1);
var dateAry = newDate.toArray();
return parseInt(dateAry[6]);
};
var tdNodes = document.getElementsByTagName("td");
var selectYearNode = document.getElementById("selectYear");
var selectMonthNode = document.getElementById("selectMonth");
var prevYearNode = document.getElementById("prevYear");
var prevMonthNode = document.getElementById("prevMonth");
var nextMonthNode = document.getElementById("nextMonth");
var nextYearNode = document.getElementById("nextYear");
var now = new Date();
var ary = now.toArray();
function changeYearOrMonth(iYearDiff, iMonthDiff) {
var currentYear = parseInt(selectYearNode.innerHTML);
var currentMonth = parseInt(selectMonthNode.innerHTML);
var newDate = new Date(currentYear+iYearDiff,currentMonth+iMonthDiff-1,1);
var dateAry = newDate.toArray();
insertAllMonth(dateAry[0], dateAry[1]);
};
function insertAllMonth(iYear, iMonth) {
selectYearNode.innerHTML = iYear;
selectMonthNode.innerHTML = iMonth;
var firstDay = getFirstDay(iYear, parseInt(iMonth)-1);
var maxDay = getMaxDayOfMonth(iYear, iMonth);
var prevMonthMaxDay = getMaxDayOfMonth(iYear, parseInt(iMonth)-1);
var i = 0;
for(i=firstDay;i>0;i--) {
tdNodes[i-1].innerHTML = prevMonthMaxDay--;
tdNodes[i-1].className = "";
}
for(i=1+firstDay;i<=maxDay+firstDay;i++) {
tdNodes[i-1].innerHTML = i-firstDay;
if(iYear == ary[0] && iMonth == ary[1] && i-firstDay == ary[2]) {
tdNodes[i-1].className = "currentMonth currentDay";
}else if(i%7 < 2){
tdNodes[i-1].className = "currentMonth week";
}else {
tdNodes[i-1].className = "currentMonth";
}
}
var one = 1;
for(;i<=tdNodes.length;i++) {
tdNodes[i-1].innerHTML = one++;
tdNodes[i-1].className = "";
}
};
insertAllMonth(ary[0], ary[1]);
prevYearNode.onclick = function() {
changeYearOrMonth(-1,0);
};
prevMonthNode.onclick = function() {
changeYearOrMonth(0,-1);
};
nextMonthNode.onclick = function() {
changeYearOrMonth(0,1);
};
nextYearNode.onclick = function() {
changeYearOrMonth(1,0);
};
};
</script>
</body>
</html>
相关文章
这篇文章主要为大家详细介绍了bootstrap下拉分页样式，带跳转页码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
BootStrap智能表单实战系列(八)表单配置json详解
这篇文章主要介绍了BootStrap智能表单实战系列(八)表单配置json详解的相关资料,本章节属于高级部分，介绍一些表单中的配置知识，非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面分类给出2009-06-06
这篇文章主要给大家介绍了关于Webpack中loader打包各种文件的相关资料，其中包括处理css文件、less文件、scss文件、url地址以及ES6高级语法的方法，需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的二维码生成器，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下2023-01-01
使用Javascript Request获取参数的时候总是提示出错，本文为此问题提供详细的解决方案，需要了解的朋友可以参考下2012-11-11
本文主要介绍了JavaScript制作年历的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2012-05-05
这篇文章主要为大家详细介绍了在JavaScript中如何设置私有属性,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2024-03-03
2008-02-02
本篇文章主要介绍了微信公众平台开发机器人，可以实现简单对话和查询天气等，有需要的可以了解一下。2016-12-12
最新评论