js+html制作简单日历的方法

时间：2021-05-26

新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑

代码：

<!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 h4 {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 h4").text(year + "年" + (month + 1) + "月"); }; run(0); $(".a1").click(function(){ iNow--; run(iNow); }); $(".a2").click(function(){ iNow++; run(iNow); }) }); </script> </head> <body> <div id="calendar"> <h4>2013年10月</h4> <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>

更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章