日历之完整版

最新推荐文章于 2024-06-09 20:04:58 发布

undefined001

最新推荐文章于 2024-06-09 20:04:58 发布

阅读量330

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/undefined001/article/details/39495617

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/20140923110340234?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdW5kZWZpbmVkMDAx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />点击prev next 显示正确时间

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日历</title>
<style type="text/css">
#calendar{ width:200px; background:pink; margin:5px; overflow:hidden;}
#calendar h6{ position:relative; text-align:center;padding:0; margin:0; font-size:16px}
#calendar h6 span{ position:absolute; color:#F00; background:#ccc; cursor:pointer;-webkit-user-select:none; -moz-user-select:none}
#calendar h6 span.prev{ left:0}
#calendar h6 span.next{ right:3px; top:0}
#calendar ul{ padding:0; margin:5px;}
#calendar ul li{ width:25px; height:25px; float:left; list-style:none; border-bottom:1px solid #CCC; border-right:#CCC 1px solid;}
</style>
</head>

<body>
<div id="calendar">
<h6><span class="prev">prev</span><div></div><span class="next">next</span></h6>
<ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>

</div>
</body>
</html>
	<script>
		function createCalendar(){
		var calendar=document.getElementById('calendar');
		var title=calendar.getElementsByTagName('h6').item(0).getElementsByTagName('div').item(0);
		
		var oUl=document.createElement('ul');
		var currentDate= new Date;
		var currentYear=currentDate.getFullYear();
		var currentMonth=currentDate.getMonth();
		var spans=calendar.getElementsByTagName('h6').item(0).getElementsByTagName('span');
		spans.item(0).οnclick=function(){active(--currentMonth)};
		spans.item(1).οnclick=function(){active(++currentMonth)};
		active(currentMonth)
		function active(m){
			oUl.innerHTML="";
			var activeDate=new Date(currentYear,m,1);
			//activeDate.setDate(1);
			var month=activeDate.getMonth();
			title.innerHTML=activeDate.getFullYear()+"年"+(month+1)+"月";	
			var diff=1-activeDate.getDay();
			if(diff==1)diff=-6
			activeDate.setDate(diff);
			
			for(var i=0;i<42;i++){
				var oLi=document.createElement('li');
				var date=activeDate.getDate();
				oLi.innerHTML=date;
				
				oUl.appendChild(oLi)
				if(activeDate.getMonth()!=month){//判断是不是当月
					oLi.style.color="#fff";
					}
        
		activeDate.setDate(date+1)
		}
		}
		calendar.appendChild(oUl);
		}
		createCalendar();
</script>