CSS3+jQuery实现的日历效果

浏览数：23 / 时间：2015年06月09日

Css3+jQuery技术实现简单的日历功能，利用ul特性，和eq遍历，比传统javascript更加简单，界面简洁，但很大气，整体暖色调，给人很舒服的感觉，Css3的出现，让jquery的某些功能更加简洁，也变得更强大。

<!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>CSS3+jQuery实现的日历效果丨礼堂座椅|任E行F9行车记录仪</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    body{
    background:url(/images/bg.gif);
    }
    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/bg001.jpg);
    float:left;
    width:53px;
    height:103px;
    }
    </style>
    <script type="text/javascript" src="/images/jquery-1.6.2.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>
    <br>如看不到预览效果，请刷新一下本页面先~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js">jquery-1.6.2.min.js</a><br><hr>