• WAP手机版 RSS订阅 加入收藏  设为首页
网页特效

一个比较美观的网页在线日历显示JS代码

时间:2013/12/17 11:55:53   作者:新站长   来源:新站长网   阅读:1398   评论:0
内容摘要:一个比较美观的网页在线日历显示JS代码,可以任意选择日期,放在个人博客还是不错的选择...

一个比较美观的网页在线日历显示JS代码可以任意选择日期,放在个人博客还是不错的选择

 

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>js日历新站长网</title>
    <style>
    *{margin:0; padding:0;}
    ul,li{list-style:none;}
    body{font-weight:bold; font-family:"微软雅黑", "新宋体", serif, arial;}
    #calendar{width:280px; overflow:hidden; border:1px solid #dadada; position:absolute; left:50%; top:50%; margin-left:-141px; margin-top:-141px; border-radius:3px;}
    .c_header{width:100%; height:60px; background-color:#83d8e7; background-image:linear-gradient(to bottom, #abe5ef, #83d8e7); position:relative;}
    .c_header h1{font-size:16px; height:30px; line-height:30px; text-align:center; color:#ffffff;}
    .c_header span{width:20px; height:20px; line-height:20px; color:#ffffff; text-align:center; position:absolute; top:5px; border-radius:50%; background-image:linear-gradient(to bottom, #83d8e7, #abe5ef); cursor:pointer;}
    .c_header span:hover{background:#83d8e7;}
    .c_header span.pre{left:10px;}
    .c_header span.next{right:10px;}
    .c_header ol{position:absolute; left:0; top:30px; overflow:hidden;}
    .c_header ol li{float:left; color:#ffffff; width:40px; height:30px; line-height:30px; text-align:center;}
    .c_body{overflow:hidden;}
    .c_body li{width:38px; height:38px; line-height:38px; font-size:16px; text-align:center; float:left; border:1px solid #ffffff; color:#333;}
    .c_body li.active{border:1px solid #dadada; background-color:#83d8e7; color:#fff;}
    .c_body li.grey{color:#999;}
    </style>
    <script>
    window.onload=function()
    {
    var oCal=document.getElementById("calendar");
    var oTitle=oCal.getElementsByTagName("h1")[0];
    var oUl=oCal.getElementsByTagName("ul")[0];
    var aLi=oUl.getElementsByTagName("li");
    var oPre=oCal.getElementsByTagName("span")[0];
    var oNext=oCal.getElementsByTagName("span")[1];
    var oNow=new Date();
    var nowYear=oNow.getFullYear();
    var nowMonth=oNow.getMonth();
    var nowDate=oNow.getDate();
    var nowDay=oNow.getDay();
    var nowTime=oNow.getTime();
    var tMonth=nowMonth;//作为日历里更改的那个Month
    function createCalendar(tMonth)
    {
    //根据传入的月份重新算时间
    var oDate=new Date();
    oDate.setMonth(tMonth);
    oDate.setDate(1);
    var iYear=oDate.getFullYear();
    var iMonth=oDate.getMonth();
    var iDay=oDate.getDay();
    oTitle.innerHTML=iYear+"年"+(iMonth+1)+"月";
    //初始化一下
    for(var i=0;i<aLi.length;i++)
    {
    aLi[i].innerHTML="";
    aLi[i].style.height="40px";
    aLi[i].className="";
    }
    var iSum=0; //存本月天数
    var bLeap=false;//是否是闰年
    if(iYear%4==0 && iYear%100!==0 || iYear%400==0) bLeap=true;
    switch(iMonth+1)
    {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
    iSum=31;
    break;
    case 4:
    case 6:
    case 9:
    case 11:
    iSum=30;
    break;
    case 2:
    if(bLeap) iSum=29;
    else iSum=28;
    break;
    }
    for(var i=1;i<=iSum;i++)
    {
    aLi[iDay].innerHTML=i;
    iDay++;
    }
    for(var i=0;i<aLi.length;i++)
    {
    if(aLi[i].innerHTML==nowDate && iYear==nowYear && iMonth==nowMonth)
    {
    aLi[i].className="active";
    }
    else if((aLi[i].innerHTML<nowDate && iMonth==nowMonth && iYear==nowYear) ||
    iMonth<nowMonth && iYear==nowYear ||
    iYear<nowYear)
    {
    aLi[i].className="grey";
    }
    }
    //把没字的格子折叠起来
    for(var i=0;i<aLi.length;i++)
    {
    if(aLi[i].innerHTML=="")
    {
    aLi[i].style.height="0px";
    }
    }
    }
    createCalendar(tMonth);
    oPre.onclick=function()
    {
    createCalendar(--tMonth);
    };
    oNext.onclick=function()
    {
    createCalendar(++tMonth);
    };
    };
    </script>
    </head>
    <body>
    <div id="calendar">
    <div class="c_header">
    <h1></h1>
    <span class="pre">&lt;</span>
    <span class="next">&gt;</span>
    <ol>
    <li>日</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
    </ol>
    </div>
    <ul class="c_body">
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ul>
    </div>
    </body>
    </html>


标签:absolute calendar position relative 在线日历 
相关评论
诚信网站 备案信息 网警110 不良信息举报 网络安全监察 QQ站长联盟安全认证 360安全认证网站
冀ICP备13003921号-1