JavaScript实现简单的日历效果

时间：2021-05-26

只是个简单的日历模板，各位可根据需要自行添加需要的功能。该模板更多的是提供了关于年、月、日、月初、月末、星期的获取函数。各位可根据需要自行获取。欢迎提供更简便的方式方法，互相学习提高！谢谢~~

<!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.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>

JavaScript实现简单的日历效果

相关文章

JavaScript实现简单日历效果

JavaScript代码实现简单日历效果

js实现简单的日历显示效果函数示例

javascript实现2016新年版日历

javascript中Date对象应用之简易日历实现