注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Search的博客

不断学习中!

 
 
 

日志

 
 

JavaScript日历程序  

2013-03-02 12:33:41|  分类: JavaScript学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

运行效果如下
JavaScript日历程序 - Search - Search的博客
 
<html>
    <head>
        <title>简单日历的制作</title>
        <script type="text/javascript">
            function calendar()
            {
                var today=new Date();
                //返回当前年份
                var year=today.getFullYear();
                //返回当前月份
                var month=today.getMonth();
                //返回当前日期
                var date=today.getDate();
                //获取本月第一天所对应的是星期几
                var startDay=new Date(year,month,1).getDay();
                //获取当月天数
                var dayNumbers=new Date(year,month-1,0).getDate();
                //begin to draw calendar
                var numRow=0; //记录行的个数
                var i;
                var html="";
                html="<table id='Body' width='212'><tbody>";
                html+="<tr>";
                //将第一天之前用空白填充
                for(i=0;i<startDay;i++)
                {
                    html+="<td></td>"
                    numRow++;
                }
                for(var j=1;j<=dayNumbers;j++)
                {
                    if(j==date)
                    {
                        html+="<td style=\"color:red\" onclick=\"alert('today is '"+j+"号')\">"+j;
                    }else
                    {
                        html+="<td onclick=\"alert('today is"+j+"号')\">"+j;
                    }
                    html+="</td>";
                    numRow++;
                    if(numRow==7)
                    {
                        numRow=0;
                        html+="</tr><tr>"
                    }
                }
                html+="</tr></tbody></table>";
                try
                {
                     document.getElementById("Container").innerHTML = html;    
                    // alert(document.getElementById("LDay").innerHTML);
                }catch(exception)
                {
                    alert(exception.message);
                }
            }
        </script>
        <style type="text/css">
              #Header /*标题样式*/
        {
            height: 21px;
            font-family: "宋体";
            font-size: 12px;
        }
        #LDay td /*星期的单元格样式*/
        {
            width: 30px;
            height: 30px;
            text-align: center;
            font-family: "宋体";
            font-size: 12px;
        }
        #LBody td /*日期的单元格样式*/
        {
            width: 30px;
            height: 30px;
            text-align: center;
            font-family: "宋体";
            font-size: 12px;
            color: #999;
            font-weight: bold;
        }
        </style>
    </head>
    <body>
       <table id="Calendar" width="200">
        <tr>
            <td height="21" bgcolor="#78b3ed" width="212">
                <table id="LHeader" height="21" width="212">
                    <tbody>
                        <tr align="center">
                            <td align="center" width="21">&lt;</td>
                            <td align="center">
                                <span id="showDate">2010.01</span>
                            </td>
                            <td align="center" width="21">&gt;</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td height="18">
                <table id="LDay" bgcolor="#e7f1fd">
                    <tbody>
                        <tr>
                            <td>日</td>
                            <td>一</td>
                            <td>二</td>
                            <td>三</td>
                            <td>四</td>
                            <td>五</td>
                            <td>六</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td height="120" width="212" id="Container">
            
            </td>
        </tr>
    </table>
    
<input id="Button1" type="button" value="生成日历" onclick="calendar();" />
    </body>
</html>


  评论这张
 
阅读(165)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017