新手一枚，不會寫什么高大上的博文，一些平時做的小練習，獻丑
代碼：
<!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() { //必要的數(shù)據(jù) //今天的年 月 日 ；本月的總天數(shù)；本月第一天是周幾？？？ var iNow=0; function run(n) { var oDate = new Date(); //定義時間 oDate.setMonth(oDate.getMonth()+n);//設(shè)置月份 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); //時間調(diào)整到本月第一天 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>更多精彩內(nèi)容請點擊專題《javascript日歷插件使用方法匯總》進行學習
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
