javascript 日历

最新推荐文章于 2024-09-18 15:36:28 发布

wangzhantao

最新推荐文章于 2024-09-18 15:36:28 发布

阅读量80

点赞数

分类专栏： web 前端处理文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/wangzhantao/article/details/84471892

版权

web 前端处理专栏收录该内容

57 篇文章 0 订阅

订阅专栏

1 html代码

<!doctype html>

<head>
<title>  </title>
<meta charset="utf-8"/>
 
 <style type="text/css">
    #calendar1 a{
    	float:left;
    	width:30px;
    }
    
    #calendar{
		background:none repeat scroll 0 0 #E0ECF9;
		width: 210px;
		border: 1px solid #479AC7;
		position:absolute;
		left:300px;
    }  
    #calendar .week{
		background:none repeat scroll 0 0 #D5F3F4;
		float:left;
		color:#808080;
    } 

    #calendar .week a{
		 cursor: auto;
    } 
      
    #calendar a{
    	float:left;
    	width:30px;
    	display:block;
    	height:25px; /* a标签 有这个值才显示 */
    	line-height:25px;
    	text-align: center;
    	cursor: pointer;
    }  

    #calendar .head a{
    	background: none repeat scroll 0 0 #479AC7;
    }  
      
      
    #calendar .weekEnd{
    	color:red;
    }

    #calendar a.day:hover {
    	background-color:#D5F3F4
    }
</style>

</head>
<body>

    <div id="calendar1" style="background:none repeat scroll 0 0 #E0ECF9;width: 210px;border: 1px solid #479AC7;position:absolute;">
    	<span style="background:none repeat scroll 0 0 #479AC7;float:left;"><a>日</a><a>一</a><a>二</a><a>三</a><a>四</a><a>五</a><a>六</a></span>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    	<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
    </div>
 
 

</body>

2 js 处理

<script type="text/javascript">

/* 
* function 写日志的函数 
*  html 加载结束后在调用这个函数 即放到body下面  
*   参数1 logStr 需要写的日志 
*   参数2 id 写到什么地方   不写这个参数则打印到页面上 
*/  
function writeData( logStr ,id   ){  
    if(logStr==null || logStr=='' ) return ;  
       
    var logObjId= id==null? "":id ;  
    var logObj =  document.getElementById(logObjId);  
    //如果没有给出日志写到哪里则  
    logObj = logObj||document.getElementsByTagName('body')[0];  
    logObj.innerHTML = logObj.innerHTML + "  "+logStr ;  
}  


	//取出 日期的数组  42个格 ，在数组相应位置填充相应的日期 
	var getArray = function( date ){
		if(!date)  return ;
		
		var dates = new Array(42);
		var year = date.getFullYear();
		var month = date.getMonth();
		
		var dateFirst = new Date(year,month,1 ).getDay(); //取出当前月份的第一天是周几 
		var dateLast  = new Date(year,month+1,0 ).getDate(); //下一个月的第0天是本月的最后一天 
 
		
		for(var i=1;i<=dateLast ;i++ ){
			//dates[i] = new Date( year,month,i ).toLocaleString();
			dates[dateFirst+i-1] = year+"-"+month+"-"+i
		}
	 
		return dates;
	}
	
	//创建 外面轮廓
	var createOutline = function(){
		var outLine = document.createElement('div');
		outLine.setAttribute('id','calendar');
		var body =  document.getElementsByTagName('body')[0];
		body.appendChild( outLine );
		return outLine;
	}
 
	//用数字 取出 中文的月份 
	var getMonthZW = function(data){
		var zw =null ;
		switch (data)
		{
			case 1 :
				zw = '一月'; break;
			case 2 :
				zw = '二月'; break;
			case 3 :
				zw = '三月'; break;	
			case 4 :
				zw = '四月'; break;
			case 5 :
				zw = '五月'; break;
			case 6 :
				zw = '六月'; break;
			case 7 :
				zw = '七月'; break;
			case 8 :
				zw = '八月'; break;
			case 9 :
				zw = '九月'; break;
			case 10 :
				zw = '十月'; break;
			case 11 :
				zw = '十一月'; break;
			case 12 :
				zw = '十二月'; break;
		}
		return zw;
	} 
	
	//创建日历的头部   并添加  前后 的月份与年份 
	var createHead = function(outLine ,currentDate,aTemplate ){

		var head  = document.createElement('span');
		outLine.appendChild( head );
		head.className = 'head';

		//添加年份左
		var yearLeftNode = aTemplate.cloneNode();
		yearLeftNode.innerHTML = "<<";
		head.appendChild( yearLeftNode );
		yearLeftNode.style.width='30px';
		yearLeftNode.onclick = (function(date){
			return function(){
				drawCalendar(  preYear(date));
			}
		})(currentDate);
		
		//添加月份左 移动
		var monthLeftNode = aTemplate.cloneNode();
		monthLeftNode.innerHTML = "<";
		head.appendChild( monthLeftNode );	
		monthLeftNode.style.width='30px';
		monthLeftNode.onclick = (function(date){
			return function(){
				drawCalendar(preMonth(date) );
			}
		})(currentDate);
		
 
		//addMonthAndYear(head,aTemplate,"<", preMonth(date) ) ;
		
		
		//添加月份
		var monthNode = aTemplate.cloneNode();
		monthNode.innerHTML= getMonthZW( currentDate.getMonth()+1 );
		head.appendChild( monthNode );
		monthNode.style.width='40px';
		
		//添加年
		var yearNode = aTemplate.cloneNode();
		yearNode.innerHTML =  currentDate.getFullYear() +'年';
		head.appendChild( yearNode );
		yearNode.style.width='50px';

		
		//添加月份右  移动
		var monthRightNode = aTemplate.cloneNode();
		monthRightNode.innerHTML = ">";
		head.appendChild( monthRightNode );	
		monthRightNode.style.width='30px';
		monthRightNode.onclick = (function(date){
			return function(){
				drawCalendar(nextMonth(date) );
			}
		})(currentDate);
		
		//添加年 右 移动
		var yearRightNode = aTemplate.cloneNode();
		yearRightNode.innerHTML = ">>";
		head.appendChild( yearRightNode );	
		yearRightNode.style.width='30px';
		yearRightNode.onclick = (function(date){
			return function(){
				drawCalendar(nextYear(date) );
			}
		})(currentDate);
	} 
	
	//本来想把上面按钮封装一下，但单击时候全局变量date没想出办法处理
	 //头部 添加月份 与年份的     左右单击按钮 
	function addMonthAndYear(head,aTemplate,btnHtml, goToDate ){
		var node = aTemplate.cloneNode();
		node.innerHTML = ">";
		head.appendChild( node );	
		node.style.width='30px';
		node.onclick = (function(date){
			return function(){
				drawCalendar(date);
			}
		})(goToDate);
	}
	
	//得到下一年
	function nextYear(date){
		return new Date(date.getFullYear()+1,date.getMonth(),date.getDate() );
	}

	//得到前一月    范围 0-11 
	function nextMonth(date){
		var month = date.getMonth()+1;
		var year = date.getFullYear();
		if( month >11){
			month = 0;
			year++ ;
		}
		return new Date( year , month,date.getDate() );
	}
	//取出前一年 
	function preYear(date){
		return new Date(date.getFullYear()-1,date.getMonth(),date.getDate() );
	}
	
	//得到前一年    范围 0-11 
	function preMonth(date){
		var month = date.getMonth()-1;
		var year = date.getFullYear();
		if( month<0){
			month = 12;
			year-- ;
		}
		return new Date( year , month,date.getDate() );
	}	
	
	//创建周
	var createWeek = function( outLine,a ){
		var weeks = "日一二三四五六".split('');
		var week = document.createElement('span'); //复制一个超链接 
		week.className = 'week';
		for(var i=0;i<weeks.length;i++ ){
			var aNew = a.cloneNode();
			aNew.innerHTML= weeks[i] ;
			week.appendChild(aNew );
		}
		outLine.appendChild(week);
		return week;
	} 
	
	//创建日期显示
	var createDay= function(outLine,dates,aTemplate){
		if(!dates) return ;
		for(var i=0;i<dates.length;i++ ){
			var aNew = aTemplate.cloneNode(); //复制一个超链接 
		 
			if(dates[i] && dates[i]!='undefine'){
				 
				aNew.innerHTML=dates[i].split('-')[2] ;	 //添加 天
				aNew.className = 'day'; //添加 hover样式
				if( i%7==0 ||  i%7==6 )  aNew.className='weekEnd';
				
				//运用 闭包 在单击的时候  保存日期到单击事件中 
				aNew.οnclick=(function(d){
					return function(){
						//拿到 对应位置的日期 
						alert( d);
					}
				})( dates[i] );
			} 
			outLine.appendChild(aNew );
		}
	}
	
	

	
	//画日历 
	var drawCalendar = function(date){
		//收集一个月的日期数组
		var arrs = getArray(date);
		
		var outLine = createOutline();//创建外边框
		var aTemplate = document.createElement('a'); //模板
		
		createHead(outLine, date ,aTemplate);//创建日历的头部
		createWeek(outLine,aTemplate ); //创建日历的周的部分
		createDay(outLine,arrs, aTemplate ); //创建日历的天部分 
	}
	 
	var date = new Date();
	drawCalendar(date );
 	
	
</script>