캘린더 구현 방법 공유
- 零下一度원래의
- 2017-06-27 09:37:101237검색
저는 초보자입니다. 수준 높은 블로그 게시물을 작성하는 방법을 모릅니다. 부끄러움을 표시하기 위해 일반적으로 하는 몇 가지 작은 연습입니다
<!doctype html>
<html>
<head>
<meta charset="utf-8"> 6
<title>无标题文档</title> 7
<style> 8
* {margin: 0;padding: 0} 9
#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative} 10
#calendar h4 {text-align: center;margin-bottom: 10px} 11
#calendar .a1 {position: absolute;top: 20px;left: 20px;} 12
#calendar .a2 {position: absolute;top: 20px;right: 20px;} 13
#calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px} 14 #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;} 15 #calendar .dateList {overflow: hidden;clear: both} 16 #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;} 17
#calendar .dateList .ccc {color: #ccc;} 18 #calendar .dateList .red {background: #F90;color: #fff;} 19 #calendar .dateList .sun {color: #f00;} 20 </style> 21 <script src="js/jquery-1.11.3.min.js?1.1.11"></script> 22 <script> 23 $(function() { 24 25 //必要的数据 26
//今天的年 月 日 ；本月的总天数；本月第一天是周几？？？ 27 var iNow=0; 28 29 function run(n) { 30 31 var oDate = new Date(); //定义时间 32 oDate.setMonth(oDate.getMonth()+n);//设置月份 33 var year = oDate.getFullYear(); //年 34
var month = oDate.getMonth(); //月 35 var today = oDate.getDate(); //日 36 37 //计算本月有多少天 38 var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; 39 40 //判断闰年 41 if(month == 1) { 42
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { 43 allDay = 29; 44 } 45 } 46 47 //判断本月第一天是星期几 48 oDate.setDate(1); //时间调整到本月第一天 49
var week = oDate.getDay(); //读取本月第一天是星期几 50 51 //console.log(week); 52 $(".dateList").empty();//每次清空 53 //插入空白 54 55 for(var i = 0; i < week; i++) { 56 $(".dateList").append("<li></li>"); 57 } 58 59
//日期插入到dateList 60 for(var i = 1; i <= allDay; i++) { 61 $(".dateList").append("<li>" + i + "</li>") 62 } 63 //标记颜色===================== 64 $(".dateList li").each(function(i, elm){ 65
//console.log(index,elm); 66
var val = $(this).text(); 67 //console.log(val); 68 if (n==0) { 69
if(val<today){ 70 $(this).addClass('ccc') 71 }else if(val==today){ 72
$(this).addClass('red') 73
}else if(i%7==0 || i%7==6 ){ 74 $(this).addClass('sun') 75 } 76 }else if(n<0){ 77
$(this).addClass('ccc') 78 }else if(i%7==0 || i%7==6 ){ 79
$(this).addClass('sun') 80
} 81
}); 82 83
//定义标题日期 84
$("#calendar h4").text(year + "年" + (month + 1) + "月"); 85 }; 86 run(0); 87
$(".a1").click(function(){ 89 iNow--; 90 run(iNow); 91 });
$(".a2").click(function(){ 94
iNow++; 95
run(iNow); 96
}) 97 }); 98
</script> 99
</head>100 101 <body>102
<div id="calendar">103
<h4>2013年10月</h4>104
<a href="##" class="a1">上月</a>105
<a href="##" class="a2">下月</a>106
<ul class="week">107
<li>日</li>108
<li>一</li>109
<li>二</li>110
<li>三</li>111
<li>四</li>112
<li>五</li>113
<li>六</li>114 115
</ul>116
<ul class="dateList"></ul>117
</div>118 119 </body>120 121 </html>위 내용은 캘린더 구현 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript 입력 예시 소스코드 사례다음 기사：JavaScript 입력 예시 소스코드 사례