HTML 简单日历制作方法
2021-07-12 11:05
标签：方法 image 空白 日历 多少 idt top this .text 新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑 HTML 简单日历制作方法 标签：方法 image 空白 日历 多少 idt top this .text 原文地址：http://www.cnblogs.com/lypyongpeng/p/7082081.html
1 doctype html>
2 html>
3
4 head>
5 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">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("");
57 }
58
59 //日期插入到dateList
60 for(var i = 1; i allDay; i++) {
61 $(".dateList").append("" + i + "")
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(valtoday){
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(n0){
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
88 $(".a1").click(function(){
89 iNow--;
90 run(iNow);
91 });
92
93 $(".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>