这篇文章将为大家详细讲解有关js+html如何制作简单日历，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑
代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative} #calendar h5 {text-align: center;margin-bottom: 10px} #calendar .a1 {position: absolute;top: 20px;left: 20px;} #calendar .a2 {position: absolute;top: 20px;right: 20px;} #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px} #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;} #calendar .dateList {overflow: hidden;clear: both} #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;} #calendar .dateList .ccc {color: #ccc;} #calendar .dateList .red {background: #F90;color: #fff;} #calendar .dateList .sun {color: #f00;} </style> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function() { //必要的数据 //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？ var iNow=0; function run(n) { var oDate = new Date(); //定义时间 oDate.setMonth(oDate.getMonth()+n);//设置月份 var year = oDate.getFullYear(); //年 var month = oDate.getMonth(); //月 var today = oDate.getDate(); //日 //计算本月有多少天 var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; //判断闰年 if(month == 1) { if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { allDay = 29; } } //判断本月第一天是星期几 oDate.setDate(1); //时间调整到本月第一天 var week = oDate.getDay(); //读取本月第一天是星期几 //console.log(week); $(".dateList").empty();//每次清空 //插入空白 for(var i = 0; i < week; i++) { $(".dateList").append("<li></li>"); } //日期插入到dateList for(var i = 1; i <= allDay; i++) { $(".dateList").append("<li>" + i + "</li>") } //标记颜色===================== $(".dateList li").each(function(i, elm){ //console.log(index,elm); var val = $(this).text(); //console.log(val); if (n==0) { if(val<today){ $(this).addClass('ccc') }else if(val==today){ $(this).addClass('red') }else if(i%7==0 || i%7==6 ){ $(this).addClass('sun') } }else if(n<0){ $(this).addClass('ccc') }else if(i%7==0 || i%7==6 ){ $(this).addClass('sun') } }); //定义标题日期 $("#calendar h5").text(year + "年" + (month + 1) + "月"); }; run(0); $(".a1").click(function(){ iNow--; run(iNow); }); $(".a2").click(function(){ iNow++; run(iNow); }) }); </script> </head> <body> <div id="calendar"> <h5>2013年10月</h5> <a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a> <a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a> <ul class="week"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <ul class="dateList"></ul> </div> </body> </html>关于“js+html如何制作简单日历”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
