用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

年历

2015-05-25 作者: 小韦举报

[javascript]代码库

<html>
<head><title></title></head>
<body>
<table align="left">
    <tr>
        <td id="一月">
        </td>
        <td id="二月">
        </td>
        <td id="三月">
        </td>
    </tr>
    <tr>
        <td id="四月">
        </td>
        <td id="五月">
        </td>
        <td id="六月">
        </td>
    </tr>
    <tr>
        <td id="七月">
        </td>
        <td id="八月">
        </td>
        <td id="九月">
        </td>
    </tr>
    <tr>
        <td id="十月">
        </td>
        <td id="十一月">
        </td>
        <td id="十二月">
        </td>
    </tr>
        </table>
</body>
<script language="javascript">
     
    //获取整个日历(12个月)
    function getCalendar(year){
 
        for(var i=0;i<12;i++){
            getMonth(year,i);
        }
    }
    //获取一个月的日历
    function getMonth(year,month){
 
        var date = new Date(year,month,1,0,0,0,0);  //获取当月
        var monthTable=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
        var day=["日 ","一 ","二 ","三 ","四 ","五 ","六 "];   //星期
        //获取界面元素
        var container=document.getElementById(monthTable[month]);
        container.vAlign="top"; //让每个单元格向上面靠齐
        //元素的内容-每个月的日期表格
        var table=document.createElement("table");
        //第一行是标明是几月
        var rowHeader=table.insertRow(table.rows.length);   //返回的是一行
        var cell=rowHeader.insertCell(0);   //返回的是一列
        cell.colSpan="7";
        cell.innerHTML=monthTable[month];
        cell.align="center";
         
        rowHeader=table.insertRow(table.rows.length);   //返回的是第二行
        //第二行是星期
        for(var i=0;i<7;i++){
            var cell=rowHeader.insertCell(i);
            cell.innerHTML=day[i];
        }
        //日期的第一行
        rowHeader=table.insertRow(table.rows.length);
        for(var i=0;i<date.getDay();i++){
            var  cell=rowHeader.insertCell(i);
             
        }
        //将单元格进行填充
        for(var i=0;i<31;i++){
            if(date.getDay()==0){   //如果这个月的第一天是星期天
                rowHeader=table.insertRow(table.rows.length);
            }
            //1日的那一天所在的单元格
            var cell=rowHeader.insertCell(date.getDay()%7);
            cell.innerHTML=date.getDate();
            cell.align="center";
            date.setDate(i+2);
            if(date.getDate()==1) break;
             
        }
         
        //挂载container的孩子
        var childNode=container.firstChild;
        if(childNode!=null){
            container.removeChild(container.firstChild)
        }
        container.appendChild(table);
    }
     
    //执行函数
    getCalendar(2015);
    //可以改进添加样式使年历更加美观.
</script>
<html>

[代码运行效果截图]


年历


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...