本文主要是介绍javascript实战——万年历查询，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
javascript实战——万年历查询
思路：
1：动态添加年，月；
2：封装遍历方法；
3：添加日：判断平年还是闰年；每个月的第一天是星期几；
html:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>万年历</title><link rel="stylesheet" type="text/css" href="demo.css"><script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="box"><div id="top"><select id="year"><option value="" class="info_year">请选择年份</option></select>年<select id="month"><option value="" class="info_month">请选择月份</option></select>月<input id='button' type="button" name="button" style="width: 60px;" value="查询"></div><div id="con"><ul class="week"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li></ul><ul class="day"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</div>
</body>
</html>css:
*{margin: 0;padding: 0;list-style-type: none;
}
#box{width: 450px;height: 380px;border:1px solid #3399ff;margin:100px auto 0;border-radius: 5px;
}
#top{width: 100%;height: 50px;border-bottom: 1px solid #3399ff;font-size: 15px;
}
#year{margin: 15px 10px;}
#year,#month{text-align: center;margin-right: 15px;}
#con{width: 420px;height: 300px;margin:0 auto 0;}
#con ul.week{width: 420px;height: 45px;
}
#con ul.week li{width: 60px;height: 45px;text-align: center;float: left;}
/*#con ul.week li.weekend{color: red;
}*/
#con ul.day li{width: 60px;height: 45px;border-top: 1px solid #ddd;float: left;line-height: 50px;text-align: center;font-size: 20px;
}
动态添加年月：
js:
window.onload = function(){var listYear = document.getElementById('year'); var listMonth = document.getElementById('month');forEach(function(i){var year = document.createElement('option');year.innerHTML = i;year.value = i;listYear.appendChild(year)},2051,1900)forEach(function(i){var month = document.createElement('option');month.innerHTML = i;month.value = i;listMonth.appendChild(month);},13,1)
}
// 封装遍历方法
function forEach(callback,length,firstNum){var i;i=firstNum?firstNum:0for(;i<length;i++){callback(i)}
}图示：
第二步：
添加日期：模仿年月；在li标签里添加数字
问题：添加的天数根据每月多少天来写；从哪里添加根据每月的第一天是星期几；
思路:
1：获取所有日期下的li标签；
2：给所有li标签添加内容，需要遍历；
3：在便利条件下，根据年月来确定每月日期，var year = listYear.value; var month = listMonth.value-1;
4 :每月天数用数组存储，[31,28,31,30,31,30,31,31,30,31,30,31]，在遍历之前，闰年：m_day[1]=29;
便利范围<每月天数m_day[month]，从0开始遍历，但不从0开始还添加内容；
5：从第几个li开始设置，设置值是多少？
获取所有li标签集合listDay;
获取当月的第一天是星期几firstDay;
添加内容：listDay[i+fisrtDay-1].innerHTML=i+1;当firstDay是0时 listDay[i+firstDay+6].innerHTML=i+1；
6：清理bug:在查询时清理掉所有li标签的内容：forEach(function(i){listDay[i].innerHTML = '';},listDay.length)
这篇关于javascript实战——万年历查询的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
