关闭

闲来无事写的一个简单的JavaScript日历

标签: javascriptfunctiontablexhtmldatehtml
390人阅读 评论(0) 收藏 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
        <script>
       
        var celendarContents={
            "1":"http://xxx.blog.cn/show.action?d=1",
            "3":"http://xxx.blog.cn/show.action?d=1",
            "15":"http://xxx.blog.cn/show.action?d=1",
            "19":"http://xxx.blog.cn/show.action?d=1",
            "24":"http://xxx.blog.cn/show.action?d=1",
            "27":"http://xxx.blog.cn/show.action?d=1"
        }
       
        var today=new Date();
        function init(){
            setCelendar(today.getFullYear(),today.getMonth());
        }
       
        function nextYear(){
            setCelendar(today.getFullYear()+1,today.getMonth());
            today.setYear(today.getFullYear()+1);
        }
       
        function preYear(){
            setCelendar(today.getFullYear()-1,today.getMonth());
            today.setYear(today.getFullYear()-1);
        }
       
        function nextMonth(){
            var month=today.getMonth();
            var year=today.getFullYear();
            month++;
            if(month>11){
                month=0;
                year=year+1;
            }
            today.setYear(year);
            today.setMonth(month);
            setCelendar(year,month);
        }
       
        function preMonth(){
            var month=today.getMonth();
            var year=today.getFullYear();
            month--;
            if(month<0){
                month=11;
                year=year-1;
            }
            today.setYear(year);
            today.setMonth(month);
            setCelendar(year,month);
           
        }
       
        function clear(){
            for(var i=0;i<42;i++){
                var tdid="ctd"+i;
                document.getElementById(tdid).innerHTML="";
            }
        }
       
        //实际中调使用ajax获得内容日期列表
        function getCelendarContents(){
            return celendarContents;
        }
       
       
        function setCelendar(year,month){
            clear();
            var d=new Date();
            d.setYear(year);
            d.setMonth(month);
            d.setDate(1);
            var dow=d.getDay();
            document.getElementById("c_year").innerHTML=year;
            document.getElementById("c_month").innerHTML=month+1;
            var i=1;
            var m=month;
            var contents=getCelendarContents();
            while(m==month){
                var tdid="ctd"+(i-1+dow);
                var htmlCode=""+i;
                if(contents[i]){
                    var url=contents[i];
                    htmlCode="<a href='"+url+"' target='_blank'>"+i+"</a>";
                }
                document.getElementById(tdid).innerHTML=htmlCode;
                i++;
                d.setDate(i)
                m=d.getMonth();

            }
        }
       
       
       
       
       
       
    </script>
</head>

<body onload="init();">

    <table>
        <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
        </tr>
        <tr>
            <td id="ctd0"></td>
            <td id="ctd1"></td>
            <td id="ctd2"></td>
            <td id="ctd3"></td>
            <td id="ctd4"></td>
            <td id="ctd5"></td>
            <td id="ctd6"></td>
        </tr>
        <tr>
            <td id="ctd7"></td>
            <td id="ctd8"></td>
            <td id="ctd9"></td>
            <td id="ctd10"></td>
            <td id="ctd11"></td>
            <td id="ctd12"></td>
            <td id="ctd13"></td>
        </tr>
        <tr>
            <td id="ctd14"></td>
            <td id="ctd15"></td>
            <td id="ctd16"></td>
            <td id="ctd17"></td>
            <td id="ctd18"></td>
            <td id="ctd19"></td>
            <td id="ctd20"></td>
        </tr>
        <tr>
            <td id="ctd21"></td>
            <td id="ctd22"></td>
            <td id="ctd23"></td>
            <td id="ctd24"></td>
            <td id="ctd25"></td>
            <td id="ctd26"></td>
            <td id="ctd27"></td>
        </tr>
        <tr>
            <td id="ctd28"></td>
            <td id="ctd29"></td>
            <td id="ctd30"></td>
            <td id="ctd31"></td>
            <td id="ctd32"></td>
            <td id="ctd33"></td>
            <td id="ctd34"></td>
        </tr>
        <tr>
            <td id="ctd35"></td>
            <td id="ctd36"></td>
            <td id="ctd37"></td>
            <td id="ctd38"></td>
            <td id="ctd39"></td>
            <td id="ctd40"></td>
            <td id="ctd41"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">
                <table>
                    <tr>
                        <td><a href="javascript:preYear()"><<</a></td>
                        <td id="c_year"></td>
                        <td><a href="javascript:nextYear()">>></a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="7" align="center">
                <table>
                    <tr>
                        <td><a href="javascript:preMonth()"><<</a></td>
                        <td id="c_month"></td>
                        <td><a href="javascript:nextMonth()">>></a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>
</html>
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:107435次
    • 积分:1390
    • 等级:
    • 排名:千里之外
    • 原创:33篇
    • 转载:9篇
    • 译文:0篇
    • 评论:19条
    最新评论