JS简易日历-优快云博客

周末花几个小时写的一个小日历，也是js入门级别的，刚开始学习的朋友可以借鉴：

实现的思路：

1、搭建窗体，自己想要实现什么样的效果，在写之前一定要有一个清晰的思路

2、一个一个功能的添加，实现，不要急，一个做好了，在做下一个

3、写日历，打印日历，之前用java语言写过，是在控制台输出比较好控制，在网页里面，并且是在一个div里面要实现这种效果，大家就需要多花点时间了，因为日历是有换行的，不是一直到底，该用什么去显示我们的日期，然后又该怎么去换行

我这里是用到了，DOM在div添加ul，然后在再在ul里面循环添加li，再用css控制width、height属性

都是简单的东西，直接上代码：

html代码：

ps:这是div搭建的，如果大家只需要后面的日历，可以把前面div删掉就行了

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>日历</title>
  6 <style type="text/css">
  7 #xingqi{ text-align:center;}
  8 #xingqi ul{ width:450px; height:30px; text-align:center; line-height:30px; margin:0px; padding:0px;} 
  9 #xingqi ul li{ float:left; list-style-type:none; width:62px; height:30px; font-weight:bold;}
 10 
 11 #show_rili{width:450px; height:270px;background-color:#fff; float:left;}
 12 #show_rili ul{ width:450px; height:52px; text-align:center; line-height:52px; margin:0px; padding:0px;} 
 13 #show_rili ul li{ float:left; list-style-type:none; width:62px; height:52px; border:1px solid #9F3; font-size:20px;}
 14 </style>
 15 
 16 </head>
 17 
 18 <body onload="time(),show()">
 19 <div id="content" style="width:450px; height:370px; border:1px solid #999; margin:0px auto;">
 20 <div style="width:450px; height:100px; border:1px solid #9C0; float:left;">
 21 <!--显示日期，动态时间显示-->
 22 <div id="show_time" style="width:450px; height:30px; float:left;  background-color:#CFC;">
 23 <!--显示当前日期-->
 24 <div style=" width:250px; height:25px; float:left; text-align:center; padding-top:5px;">
 25 <a href="#" title="点击返回今天日期" style="text-decoration:none; color:#000" onclick="fanhui()"><label>今天日期：</label><span id="date"></span></a>
 26 </div>
 27 <!--显示当前日期结束-->
 28 <!--动态显示时间-->
 29 <div style="width:200px; height:25px; float:left; text-align:center; padding-top:5px;">
 30 <label>当前时间：</label><span id="dong_time"></span>
 31 </div>
 32 <!--动态显示时间结束-->
 33 </div>
 34 <!--显示日期，动态时间显示结束-->
 35 <!--选择年月日-->
 36 <div style="width:450px; height:30px; background-color:#fff; float:left; text-align:center; padding-top:10px;">
 37 <select id="year">
 38 <script type="text/javascript">
 39 var date=new Date();
 40 var year=date.getFullYear();
 41 for(var i=1900;i<=2099;i++){
 42     if(i==year){
 43         document.write("<option selected='selected' value='"+year+"'>"+year+"</option>");
 44     }else{
 45         document.write("<option value='"+i+"'>"+i+"</option>");
 46     }    
 47 }
 48 </script>
 49 </select>年
 50 <select  id="month">
 51 <script type="text/javascript">
 52 var date=new Date();
 53 var month=date.getMonth()+1;
 54 for(var i=1;i<=12;i++){
 55     if(i==month){
 56         document.write("<option selected value='"+month+"'>"+month+"</option>");
 57     }else{
 58         document.write("<option value='"+i+"'>"+i+"</option>");
 59     }    
 60 }
 61 </script>
 62 </select>月
 63 <input type="button" value="显示日历" onclick="show()"/>
 64 </div>
 65 <!--选择年月日结束-->
 66 <!--星期-->
 67 <div id="xingqi" style="width:450px; height:30px; background-color:#FC0; float:left;">
 68 <ul>
 69 <li>日</li>
 70 <li>一</li>
 71 <li>二</li>
 72 <li>三</li>
 73 <li>四</li>
 74 <li>五</li>
 75 <li>六</li>
 76 </ul>
 77 </div>
 78 <!--星期结束-->
 79 </div>
 80 <!--日历显示区-->
 81 <div id="show_rili">
 82 <!--<script type="text/javascript">
 83 var date=new Date();
 84 var year=date.getFullYear();
 85 var month=date.getMonth()+1;
 86 var day=date.getDate();
 87 var sumDay=0;
 88 //从1900到今天一共多少天
 89 //年
 90 for(var i=1900;i<year;i++){
 91     //判断闰年和平年
 92     if((i%4==0&&i%100!==0)||(i%400==0)){
 93         sumDay+=366;    
 94     }else{
 95         sumDay+=365;    
 96     }
 97 }
 98 //月
 99 for(var i=1;i<month;i++){
100     if(i==1||i==3||i==5||i==7||i==8||i==10||i==12){
101         sumDay+=31;    
102     }else if(i==2){
103         if((year%4==0&&year%100!==0)||(year%400==0)){
104             sumDay+=29;    
105         }else{
106             sumDay+=28;    
107         }
108     }else{
109         sumDay+=30;    
110     }
111 }
112 //算出输入年-月-1是星期几
113 sumDay+=1;
114 var weekDay=sumDay%7;
115 //将在这之前的星期输出空
116 //在添加ul标签
117 document.write("<ul>");
118 for(var i=0; i<weekDay; i++){
119     document.write("<li>"+"&nbsp;"+"</li>");    
120 }
121 //判断现在的月份有多少天
122 var monthDay=0;  
123 if(month==2){
124     if((year%4==0&&year%100!=0)||year%400==0){
125         monthDay=29;
126     }else{
127         monthDay=28;
128     }
129 }else if(month==4||month==6||month==9||month==11){   //小月30天
130     monthDay=30;
131 }else{  //大月31天
132     monthDay=31;
133 }
134 //输出所有日历
135 for(var i=1;i<=monthDay;i++){
136     if(sumDay%7==6){
137         document.write("<li id='li"+i+"'>"+i+"</li>"+"<br />");    
138     }else{
139         document.write("<li id='li"+i+"'>"+i+"</li>");    
140     }
141     sumDay++;
142 }
143 //让今天的日背景高亮显示
144 var li=document.getElementsByTagName("li");
145 for(var i=1; i<=monthDay; i++){
146     if(document.getElementById("li"+i).innerHTML==day){
147         document.getElementById("li"+i).style.backgroundColor="#FC0";
148     }
149 }
150 document.write("</ul>");
151 
152 </script>-->
153 </div>
154 <!--日历显示区结束-->
155 </div>
156 
157 </body>
158 </html>

js代码：代码不多

  1 <script type="text/javascript">
  2 //动态显今天的日期时间
  3 var date=new Date();
  4 //当前的年月日
  5 var y=date.getFullYear();
  6 var m=date.getMonth()+1;
  7 var d=date.getDate();
  8 
  9 function time(){
 10     //今天日期
 11     document.getElementById("date").innerHTML=date.toLocaleDateString();
 12     var time=new Date();
 13     var hour=time.getHours();
 14     var miu=time.getMinutes();
 15     var sec=time.getSeconds();
 16     document.getElementById("dong_time").innerHTML=hour+":"+miu+":"+sec+"";
 17     setTimeout("time()",1000);
 18     }
 19 
 20 //清空显示日历的div
 21 function clickDiv(){
 22     document.getElementById("show_rili").innerHTML="";
 23 }
 24 
 25 //返回当前天的日历
 26 function fanhui(){
 27     document.getElementById("year").value=y;
 28     document.getElementById("month").value=m;
 29     //显示日历
 30     show();
 31 }
 32 
 33 //显示时间
 34 function show(){
 35     clickDiv();
 36     
 37     var oDiv=document.getElementById("show_rili");
 38     var ul=document.createElement("ul");
 39     oDiv.appendChild(ul);
 40     var li=new Array();  //声明li数组
 41     
 42     //获取下拉列表的年月
 43     var year=document.getElementById("year").value;
 44     var month=document.getElementById("month").value;
 45     //当前的年月日
 46     var date=new Date();
 47     var y=date.getFullYear();
 48     var m=date.getMonth()+1;
 49     var d=date.getDate();
 50 
 51     var sumDay=0; //总天数
 52     //从1900到今天一共多少天
 53     //年
 54     for(var i=1900;i<year;i++){
 55         //判断闰年和平年
 56         if((i%4==0&&i%100!==0)||(i%400==0)){
 57             sumDay+=366;    
 58         }else{
 59             sumDay+=365;    
 60         }
 61     }
 62     //月
 63     for(var i=1;i<month;i++){
 64         if(i==1||i==3||i==5||i==7||i==8||i==10||i==12){
 65             sumDay+=31;    
 66         }else if(i==2){
 67             if((year%4==0&&year%100!==0)||(year%400==0)){
 68                 sumDay+=29;    
 69             }else{
 70                 sumDay+=28;    
 71             }
 72         }else{
 73             sumDay+=30;    
 74         }
 75     }
 76     //算出输入年-月-1是星期几
 77     sumDay+=1;
 78     var weekDay=sumDay%7;
 79     //将在这之前的星期输出空
 80     //在添加ul标签
 81     for(var i=0; i<weekDay; i++){
 82         li[i]=document.createElement("li");
 83         ul.appendChild(li[i]);        
 84     }
 85     //判断现在的月份有多少天
 86     var monthDay=0;  
 87     if(month==2){
 88         if((year%4==0&&year%100!=0)||year%400==0){
 89             monthDay=29;
 90         }else{
 91             monthDay=28;
 92         }
 93     }else if(month==4||month==6||month==9||month==11){   //小月30天
 94         monthDay=30;
 95     }else{  //大月31天
 96         monthDay=31;
 97     }
 98     //输出所有日历
 99     for(var i=1;i<=monthDay;i++){
100         if(sumDay%7==6){
101             li[i]=document.createElement("li");
102             li[i].innerHTML=i;
103             li[i].id="li"+i;
104             ul.appendChild(li[i]);
105         }else{
106             li[i]=document.createElement("li");
107             li[i].innerHTML=i;
108             li[i].id="li"+i;
109             ul.appendChild(li[i]);
110         }
111         sumDay++;
112     }//for
113     //让当前天的日背景高亮显示
114     var li=document.getElementsByTagName("li");
115     for(var i=1; i<=monthDay; i++){
116         if(year==y&&month==m&&document.getElementById("li"+i).innerHTML==d){
117             document.getElementById("li"+i).style.backgroundColor="#FC0";
118         }
119     }//for
120 }
121 
122 </script>