Date对象实践万年历

1.引入

我们上一节课我们讲解了有关日期的Date()对象，现在我们写一个该对象的使用:日历。

2.代码实现(部分)以及效果

(1).页面内容显示

<div class="contianner">
     <div class="select-year-month">
	 <p>
		<select name="select-year" id="year">年</select>
		<select name="select-month" id="month">月</select>
	  </p>
	 </div>
			
	 <div class="days">
	   <ul>
		 <li>星期日</li>
		 <li>星期一</li>
		 <li>星期二</li>
		 <li>星期三</li>
		 <li>星期四</li>
		 <li>星期五</li>
		 <li>星期六</li>
	   </ul>
				
		<ul id="detail"></ul>
	 </div>
</div>

(2).设置相关的JavaScript内容

<script type="text/javascript">
		//获取页面元素,获取年份和月份信息字段
		var yearSelect = document.getElementById("year");
		var monthSelect = document.getElementById("month");
		var getDetailInfo = document.getElementById("detail");
		
		//初始化数据信息
		function init(){
			//初始化年份选项卡
			for(var year = 1990;year < 3000;year++){
				createOption(year,year,yearSelect)
			}
			
			//初始化月份选项卡
			for(var month = 1;month < 13;month++){
				createOption(month,month - 1,monthSelect)
			}
			
			//获取当前的日期
			var now = new Date();
			//设置获取内容
			showSelect(now.getFullYear(),now.getMonth());
			//调用显示日期
			showDate();
			
			//年份改变的时候调用改变的函数
			yearSelect.onchange = function(){
				showDate();
			}
			
			//月份改变的时候调用改变的函数
			monthSelect.onchange = function(){
				showDate();
			}
		}
		
		
		//创建内容函数
		function createOption(text,value,parent){
			var option = document.createElement("option");
			option.innerHTML = text;
			option.value = value;
			parent.appendChild(option);
		}
		
		//创建选择年份函数
		function showSelect(year,month){
			yearSelect.value = year;
			monthSelect.value = month;
		}
		
		//创建选择年份函数
		function showDate(){
			getDetailInfo.innerHTML = "";
			var year = yearSelect.value;
			var month = monthSelect.value;
			
			//设置创建空的li标签
			for(var i = 0;i < getDays(year,month);i++){
				createLiInfo("",getDetailInfo,"");
			}
			
			//设置创建有日期的li标签
			for(var i = 1;i <= getDayOfMonth(year,month);i++){
				createLiInfo(i,getDetailInfo,month);
			}
			
		}
		
		/**获取详细的内容信息**/
		//获取日
		function getDays(year,month){
	      var day = new Date(year,month,1);
		  return day.getDay();
		}
		
		//获取一个月中的日期
		function getDayOfMonth(year,month){
			var day = new Date(year,month + 1,0);
			return day.getDate();
		}
		
		//创建li标签
		function createLiInfo(text,parent,month){
			var li = document.createElement("li");
			li.innerHTML = text;
			
			//如果当前的日期和当前的日期一致，则设置为选中状态
			var getCurrentYear = new Date().getFullYear();
			var getCurrentMonth = new Date().getMonth() ;
			var getDay = getDayOfMonth(getCurrentYear,getCurrentMonth);
			if((getDay == text) && (getCurrentMonth == month)){
				li.style.backgroundColor = '#ff0000';
			}
			parent.appendChild(li);
		}
		
		//调用初始化函数
		init();		
</script>

(3).设置相关内容显示样式

<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			
			.contianner{
				width: 700px;
				background-color: #dd910e;
				margin: 20px auto;
			}
			
			.select-year-month{
				width: 700px;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			
			ul li{
				float: left;
				width: 98px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				list-style: none;
				border: 1px solid green;
			}
			
			/*设置鼠标悬停选中的时候的样式*/
			li:hover{
				background-color: #008000;
				border: 1px solid red;
				transition: all 0.1s linear 0.1s;
			}
			
			
			/*设置下拉菜单样式设置*/
			select {
			        height: 30PX;
			        width: 76px;
			        border: 1px solid #8bd1b7;
			        padding-right: 14px;
			    }
</style>

3.效果显示