JavaScript实现简单的日历效果
(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )
只是个简单的日历模板，各位可根据需要自行添加需要的功能。该模板更多的是提供了关于年、月、日、月初、月末、星期的获取函数。各位可根据需要自行获取。欢迎提供更简便的方式方法，互相学习提高！谢谢~~
<!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">"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">"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>
下一篇：javascript实现根据汉字获取简拼