jQuery+CSS3绘制网页日历

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3绘制网页日历的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>calendar</title>
<link type="text/css" href="css/calendar.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript"> 

//日历——————————————————————————————————————————
$(function() {
	
	//绘制月历体——————————————————————————————————————————
	
	 for(var i=0;i<35;i++){
	 $("<li><span></span></li>").appendTo(".month-body").addClass("month-cell"); 
	 }

	  var today=new Date()  
	  
	  var FullYear = today.getFullYear(); //获取年份
	  var m = today.getMonth();           //获取月号
	  var month = today.getMonth()+1;     //获取月份
	  
	  if(month<10){
		 month="0"+month; 
	  }
	  var date = today.getDate();	      //获取日期
	  var day = today.getDay();           //获取星期
	  
	  var monthsNum=[31,28,31,30,31,30,31,31,30,31,30,31];
	  var isleapyear = FullYear%4;        //判断闰年
	  if(isleapyear==0){
		  monthsNum[1]=29;
	  }
  
      if(day==0){
		  day = 7;
	  }
	  var firstDay = day-(date%7-1);       //!important 计算月初星期数

	  if(firstDay==7){                     //如果月初为七，归零
		  firstDay =0;
	  }
	  if(firstDay<0){                       //如果月初为负，加七循环
		  firstDay +=7;
	  }
	  
	  var f = firstDay;
	  for(var j=1;j<=monthsNum[m];j++){
		  $("li.month-cell span").eq(f).text(j).parent().addClass("pink");
		  f++; 
	  }
	  
	  $("li.month-cell span").eq(firstDay-1+date).parent().addClass("red");
	  
	  $(".month-head span").text(FullYear+"年"+month+"月");
	  
})

</script>
</head>
<body>
<div class="month-container">
      <div class="month-head"><span></span></div>
      <ul class="month-body">
      <div class="month-cell orange"><span>日</span></div>    
      <div class="month-cell blue"><span>一</span></div>
      <div class="month-cell blue"><span>二</span></div>
      <div class="month-cell blue"><span>三</span></div>
      <div class="month-cell blue"><span>四</span></div>     
      <div class="month-cell blue"><span>五</span></div>      
      <div class="month-cell blue"><span>六</span></div>
      </ul>
      <div class="clear"></div>
</div>
</body>
</html>

CSS代码(calendar.css):

@charset "utf-8";/* CSS Document Download by http://www.codefans.net*/
*{margin:0;padding:0;}
body{background:url(../images/WoodTexture1.png);}
ul{list-style:none;}
.clear{clear:both;}
.month-container{background:#fffbdf;width:504px;height:auto;margin:30px auto 0;box-shadow:2px 2px 8px 1px rgba(0,0,0,0.6);}
.month-head{background:#fffbdf;width:504px;height:50px;font:30px "microsoft yahei";text-shadow:2px 2px 3px #FFF;text-align:center;}
.month-head span{color:#ffb186;border-color:#fffbdf;line-height:50px;}
.month-cell{float:left;width:70px;height:70px;background:#F5F5F5;border:1px solid #FEFEFE;}
.month-cell:active{box-shadow:inset 2px 2px 5px rgba(0,0,0,0.6);}
.month-cell span{display:block;color:#cccccc;font:30px "microsoft yahei";text-align:center;line-height:70px;cursor:pointer;}
.month-cell.active span{border-color:#cccccc;}
.month-cell.pink{background:#fffbdf;}
.month-cell.pink span{color:#ffb186;border-color:#fffbdf;}
.month-cell.pink.active span{border-color:#ffe295;}
.month-cell.orange{background:#fff5b4;}
.month-cell.orange span{color:#ffaf6e;border-color:#fff5b4;}
.month-cell.orange.active span{border-color:#ffcf71;}
.month-cell.red{background:#ff6840;}
.month-cell.red span{color:#ffffff;border-color:#ff6840;}
.month-cell.blue{background:#5bb5ec;}
.month-cell.blue span{color:#ffffff;border-color:#5bb5ec;}
.flipContainer{width:300px;height:100px;background:#FFF;padding:10px;}
.flip{background:url(../images/filmstrip.png);float:left;width:53px;height:103px;}

附件:下载该文件资源,减少时间成本(增值服务)