<强>主要分为三个部分,1:获取李元素2:如何填写对应的日期3:如何获取点击李元素的事件。
1:通过节点间关系的属性儿童获取李元素(两个为循坏遍历);
2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期。第一行上个月的日期显示,:上月天数显示开始值=计算上个月的天数,这个月开始的第一天在星期几的值1,然后在第一行上月天数显示开始值自加。
3:利用JS的事件冒泡获取李的innerHTML显示出对应日期
<>强效果图:
<强>代码如下:
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元名称=胺⒌缁蹦谌?癊ditPlus®“比;
& lt;元名称=白髡摺蹦谌?氨?
& lt;元名称=肮丶省蹦谌?氨?
& lt;元名称=懊枋觥蹦谌?氨?
& lt; title> calendar
& lt; style>
.clear:{后
内容:“”;
显示:表;
明确:;
}
.left {
浮:左;
}
ul {
填充:0 px;
margin-top: 5 px;
margin-bottom: 0 px;
}
李{ul>
浮:左;
list-style:没有;
宽度:30 px;
高度:21 px;
边界:1 px固体# ccc;
text-align:中心;
}
.gray {
颜色:# 766565;
}
.top {
高度:25 px;
}
.top .lf-tri {
边界:10 px固体透明;
border-right-color:黑色;
margin-top: 4 px;
}
.top .rf-tri {
边界:10 px固体透明;
border-left-color:黑色;
margin-top: 4 px;
}
.top .content {
宽度:185 px;
身高:5 px;
text-align:中心;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=扒宄北?
& lt; div类=白髄f-tri”祝辞& lt;/div>
& lt; div类=白竽谌荨痹?017年2月1日& lt;/div>
& lt; div类=白髍f-tri”祝辞& lt;/div>
& lt;/div>
& lt; div>
& lt; div id=靶瞧凇北?
& lt; ul类="清晰"比;
& lt; li>日& lt;/li>
& lt; li>一& lt;/li>
& lt; li>二& lt;/li>
& lt; li>三& lt;/li>
& lt; li>四& lt;/li>
& lt; li>五& lt;/li>
& lt; li>六& lt;/li>
& lt; ul>
& lt;/div>
& lt; div id=叭掌凇北?
& lt; li> 30 & lt;/li>
& lt; li> 31日& lt;/li>
& lt; li> 1 & lt;/li>
& lt; li> 2 & lt;/li>
& lt; li> 3 & lt;/li>
& lt; li> 4 & lt;/li>
& lt; li> 5 & lt;/li>
& lt;/ul>
& lt; ul类="清晰"比;
& lt; li> 6 & lt;/li>
& lt; li> 7 & lt;/li>
& lt; li> 8 & lt;/li>
& lt; li> 9 & lt;/li>
& lt; li> 10 & lt;/li>
& lt; li> 11 & lt;/li>
& lt; li> 12 & lt;/li>
& lt;/ul>
& lt; ul类="清晰"比;
& lt; li> 13 & lt;/li>
& lt; li> 14 & lt;/li>
& lt; li> 15 & lt;/li>
& lt; li> 16 & lt;/li>
& lt; li> 17 & lt;/li>
& lt; li> 18 & lt;/li>
& lt; li> 19 & lt;/li>
& lt;/ul>
& lt; ul类="清晰"比;
& lt; li> 20 & lt;/li>
& lt; li> 21 & lt;/li>
& lt; li> 22 & lt;/li>
& lt; li> 23 & lt;/li>
& lt; li> 24 & lt;/li>
& lt; li> 25 & lt;/li>
& lt; li> 26 & lt;/li>
& lt;/ul>
& lt; ul类="清晰"比;
& lt; li> 27 & lt;/li>
& lt; li> 28 & lt;/li>
& lt; li> 1 & lt;/li>
& lt; li> 2 & lt;/li>
& lt; li> 3 & lt;/li>
& lt; li> 4 & lt;/li>
& lt; li> 5 & lt;/li>
& lt;/ul>
& lt; ul类="清晰"比;
& lt; li> 27 & lt;/li>
& lt; li> 28 & lt;/li>
& lt; li> 1 & lt;/li>
& lt; li> 2 & lt;/li>
& lt; li> 3 & lt;/li>
& lt; li> 4 & lt;/li>
& lt; li> 5 & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div>
& lt; script>
函数$ (id) {
返回. getelementbyid (id);
}
函数变化(cls) {
返回document.getElementsByClassName (cls);
}
函数getDateNum (e) {
控制台。日志(e,,e.target.nodeName)//打印发生事件的元素,再获取元素节点名
如果(e.target.nodeName==袄睢?{//先判断节点名是李
如果(e.target.className !=盎疑?{//点击本月的日期,显示在日期栏
变化(“内容”)[0]。innerHTML=年+“年”+(月+ 1)+‘月’+ e.target.innerHTML +“日”;
其他}{//点击灰色日期即(上个月或者下个月日期)切换到当月
如果(e.target.innerHTML> 14) {
上个月();
其他}{
nextMonth ();
}
}
}
}//获取年,月
今天var=new日期();
var年=today.getFullYear()、月=today.getMonth ();
var totalDay;
var极限状态=$(“日期”)定格,列表;
函数loadCalendar () {
totalDay=getMonthDays(年、月+ 1);//计算一个月的天数
var firstDay=(新日期(年、月、1)).getDay();//计算每个月1号在星期几
var lastMonthDay=getMonthDays(年、月);
var lastDayCal=lastMonthDay-firstDay + 1;//计算上个月在第一行显示的天数//获取ul元素
var num=1, nextNum=1;//日期显示//类数组对象转数组//摘要=Array.prototype.slice.call(摘要)//获取李元素填充
(var r=0; r< uls.length; r + +) {
列表=摘要[r]定格;//遍历ul、获得李
(var=0行;line< list.length; + +行){
如果(r==0){//在第一行与第一天进行判断大于等于第一天时载入日期
如果(line>=firstDay) {
列表(线).innerHTML=num + +;
列表(线).setAttribute(“类”、“);
其他}{
列表(线).innerHTML=lastDayCal + +,//第一行的上个月天数显示
列表(线).setAttribute(“类”、“灰色”);
}
其他}{//判断是否超出天数,不超出则继续加,超出则显示下个月日期
如果(num
