首页 > 代码库 > js写个日历

js写个日历

2024-07-04 17:14:30   227人阅读

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

<!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>

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


联系
我们