这篇文章主要讲解了javascript实现日历功能的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

日历

在学习javascript过程中，菜鸟教程有一个javascript实例---css日历，感觉挺有趣的，在它的基础上增加了一些简单的功能（差点哭辽）。

功能

按照传统日历方式显示该月的每一天。可以突出显示今天的日期可以翻阅上一个月和下一个月的日历

实现

step1 传统日历布局样式：分别将年份与月份、星期、该月的全部天数采用列表布局，排列组成传统日历的样式。step2 初始化和更新月份：先将列表清空（debug过程中，有一个发现，初始化的列表便存在的一个childNodes，该项目中需要清空），然后再填入前导空白（为了和星期能够对应），再填入具体某一个月的天数。step3 通过document获取列表对象，改变今天对应行的样式（className变化）来突出显示。其他细节在代码中实现

代码

html代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS日历</title><link type="text/css" rel="stylesheet" href="style.css" rel="external nofollow" ></head><body> <h2>CSS日历</h2> <div class="month"><ul><li class="prev" onclick="change(-1)">&#10094;</li><li class="next" onclick="change(1)">&#10095;</li><li ><span id="month">August</span><br><span id="year">2016</span></li></ul></div><ul class="weekdays" id="weekdays"></ul><ul class="days" id="days"></ul></body><script type="text/javascript" src="show.js"></script></html>

CSS代码

@charset "UTF-8";* {box-sizing:border-box;}ul {list-style-type: none;}body {font-family: Verdana,sans-serif;}.center { text-align: center; border: 3px solid green;}.month { padding: 70px 25px; width: 100%; background: #1abc9c;}.month ul { margin: 0; padding: 0;}.month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px;}.month .prev { float: left; padding-top: 10px;}.month .next { float: right; padding-top: 10px;}.weekdays { margin: 0; padding: 10px 0; background-color: #ddd;}.weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center;}.days { padding: 10px 0; background: #eee; margin: 0;}.days li { list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size:12px; color: #777;}.days li active { padding: 5px; background: #1abc9c; color: white !important;}/* Add media queries for smaller screens */@media screen and (max-width:720px) { .weekdays li, .days li {width: 13.1%;}}@media screen and (max-width: 420px) { .weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;}}@media screen and (max-width: 290px) { .weekdays li, .days li {width: 12.2%;}}

javascript代码

var date = new Date();var year = date.getFullYear();var month=date.getMonth();var day = date.getDate();var week=date.getDay();var p=(week-day+1+35)%7+day-1;var monthName=["January","February","March","April","May","June","July","August","September","October","November","December"];var monthNum=[31,28,31,30,31,30,31,31,30,31,30,31];var weekName=["Su","Mo","Tu","We","Th","Fr","Sa"];var aimmonth=month,aimyear=year;function init(){createTitle(year,month);var weekdays=document.getElementById("weekdays");for(var i=0;i<7;i++){ var x = document.createElement("LI");var t = document.createTextNode(weekName[i]);x.appendChild(t);weekdays.appendChild(x);}delDay();createDay();isnow();}function change(x){ aimmonth+=x;if(aimmonth==-1){aimyear-=1;aimmonth=11;}else if(aimmonth==12){aimyear+=1;aimmonth=0;}createTitle(aimyear,aimmonth);delDay(); createDay();isnow();}function createTitle(y,m){document.getElementById("year").innerHTML=y;document.getElementById("month").innerHTML=monthName[m];}function createDay(){var datetmp=new Date();datetmp.setFullYear(aimyear,aimmonth,1);var firstday=datetmp.getDay(); var days=document.getElementById("days"); for(var i=0;i<firstday;i++){var x = document.createElement("LI");var t = document.createTextNode("");x.appendChild(t);days.appendChild(x);}for(var i=1;i<=getMonthDay();i++){ var x = document.createElement("LI");var t = document.createTextNode(i);x.appendChild(t);days.appendChild(x);} }function delDay(){ var list=document.getElementById("days");var len=list.childNodes.length; for(var i=0;i<len;i++){ list.removeChild(list.childNodes[0]);}}function isnow(){ if(aimyear==year&&aimmonth==month){days.childNodes[p].} }function getMonthDay(){if(aimmonth!=2){return monthNum[aimmonth];}else{if(aimyear%4!=0||aimyear%100==0&&aimyear%400!=0){return monthNum[aimmonth];}else return 29;}} //maininit();

看完上述内容，是不是对javascript实现日历功能的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。