码迷,mamicode.com
首页 > Web开发 > 详细

js写个日历

时间:2014-05-19 22:10:31      阅读:473      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   c   code   java   

其实我是一个对时间和日期不怎么感兴趣的人,小学的时候感觉时间或者日期那块就让我很晕,因为有时候是100进制有时候是60进制,搞的我对日历一直很不感兴趣,最近不知道为什么想写一个日历了,可想而知,这个玩意对我的大脑会造成多大的伤害,很简单的.

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日历</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
</style>
</head>
<body>
<div id="can" style="border-bottom:1px solid #ccc; border-right:1px solid #ccc; width:357px; overflow:hidden; float:left; margin:100px;">
</div>
</body>
</html>


<script type="text/javascript">
    var obj=document.getElementById("can");
    var oDl=document.createElement("dl");
    var arrWeek=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
    for(var i=0;i<7;i++){
        var oDt=document.createElement("dt");
        oDt.style.background="#f2f2f2";
        oDt.style.width=50+"px";
        oDt.style.height=30+"px";
        oDt.style.textAlign="center";
        oDt.style.lineHeight=30+"px";
        oDt.style.fontSize=13+"px";
        oDt.style.borderWidth=1+"px";
        oDt.style.borderColor="#ccc";
        oDt.style.borderStyle="solid";
        oDt.style.borderRight="none";
        oDt.style.borderBottom="none";
        oDt.style.cssFloat="left";
        oDt.innerHTML=arrWeek[i];
        oDl.appendChild(oDt);
    }
    
    for(var i=0;i<42;i++){
        var oDt=document.createElement("dd");
        oDt.style.width=50+"px";
        oDt.style.height=30+"px";
        oDt.style.textAlign="center";
        oDt.style.lineHeight=30+"px";
        oDt.style.fontSize=13+"px";
        oDt.style.borderWidth=1+"px";
        oDt.style.borderColor="#ccc";
        oDt.style.borderStyle="solid";
        oDt.style.borderRight="none";
        oDt.style.borderBottom="none";
        oDt.style.cssFloat="left";
        oDl.appendChild(oDt);
    }
    
    
    obj.appendChild(oDl);

    var aDd=obj.getElementsByTagName("dd");
    var d=new Date();
    var y=d.getFullYear();
    var m=d.getMonth();
    var da=d.getDate();
    var d2=new Date(y,m,0);
    var d3=new Date(y,m+1,0);
    var md=d3.getDate();
    var d2w=d2.getDay();
    for(var i=0;i<md+d2w+1;i++){
        if(i<d2w || i==d2w){
            aDd[i].innerHTML="";    
        }else{
            if(i-d2w==da){
                aDd[i].style.backgroundColor="#aaa"
                }
            aDd[i].innerHTML=i-d2w;
        }
    }
</script>
bubuko.com,布布扣

当然,这个只是一个简单到简陋,简陋到我估计都不能使用了,哈哈,爱好而已

js写个日历,布布扣,bubuko.com

js写个日历

标签:style   blog   class   c   code   java   

原文地址:http://www.cnblogs.com/busicu/p/3731503.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!