标签：function yearSelect JavaScript value month var year Date 前端开发

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.效果显示

标签：function,yearSelect,JavaScript,value,month,var,year,Date,前端开发
来源： https://blog.csdn.net/u013185175/article/details/122239722

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。