首页 » 技术分享 » 用原生js制作日历

用原生js制作日历

　
评论关闭　1,444次浏览

先说说 我做这的过程吧。刚开始写真的烦，然后各种调试，寻找bug。最终老天不负有心人完成了制作。这是伴随着痛苦与喜悦的。（文采一塌糊涂就写到这吧^_^）

下面说一说日历，日历的制作主要应用了js的Date对象（不太了解的可以去查阅一下），其中有个重要知识点就是新建new Date（）使时，把日子设为0；例如 var myDate=new Date（2018.7.0）；var myDate=myDate.getDate（）,它的返回值是7月的最后一天也就是31，可以用他来确定一个月的天数。然后得到这个月的第一天是周几；下面是代码：

   //获取某月的总天数
           function fungetmonth(year,month)
           {
            var mydate=new Date(year,month,0);//0的目的是获取某月的天数
             mydate=mydate.getDate();
            return mydate;
           }

//把数据储存在二维数组里
           function  fungetdata(year,month){
               var array=new Array()
               for(var i=0;i<7;i++){
                   array[i]=new Array(7);}
               var mydate=new Date(year,month-1,1);
                mydate=mydate.getDay();
                var week=fungetmonth(year,month);
                var day=1;
                array[0][0]="sun";
                array[0][1]="Mon";
                array[0][2]="Tue";
                array[0][3]="Wed";
                array[0][4]="Thu";
                array[0][5]="Fri";
                array[0][6]="Sat";
                var r,c,m;
                //确定第二行的内容
                for(c=mydate;c<7;c++){
                      array[1][c]=day;
                      day++;
                }
                //把其余的天数加入到数组中
                var r,c;
                for(r=2;r<7;r++){
                    for(c=0;c<7;c++)
                    //函数作用是将其余的天数加入到表格中其中week是最一天
                    {   if(day<=week)
                        {array[r][c]=day;
                        day++;}
                    }
                }
                return array;
            }

这是把数据存到二维数组里由于星期数正好对应getdate（）的返回值，依照行数和列数储存在数组里，然后遍历这个数组把它输入到表格。

储存到数组之后就要把数据输入到HTML中来显示到页面上，这里我用的是document.write（）（jQuery刚学 。。。）

//把数组中的数据添加到页面中
            function funadddata(year,month){
                var array= fungetdata(year,month);
                var r,c;
                //第一行
                document.write("<table><tr>");
                document.write("<td>"+array[0][0]+"</td>");
                document.write("<td>"+array[0][1]+"</td>");
                document.write("<td>"+array[0][2]+"</td>");
                document.write("<td>"+array[0][3]+"</td>");
                document.write("<td>"+array[0][4]+"</td>");
                document.write("<td>"+array[0][5]+"</td>");
                document.write("<td>"+array[0][6]+"</td>");
                document.write("</tr>");
                //除第一行的其它行
                for(r=1;r<7;r++){
                    document.write("<tr>");
                    for(c=0;c<7;c++){
                        var funid="td"+r+c;
                        document.write("<td id="+funid+">");
                        if(array[r][c]>0){
                        document.write(""+array[r][c]+"");
                        }else{
                            document.write(" ");
                        }
                        document.write("</td>");
                        }
                        document.write("</tr>");
                }
                
                document.write("</table>");
            }

你也不可能是只显示某年某月吧下面就是更新数据

//更新数据
            function funupdatedata(year,month){
                var r,c;
                var array=fungetdata(year,month);//把数据写入数组中
                for(r=1;r<7;r++){
                    for(c=0;c<7;c++){
                        var funid="td"+r+c;
                        if(array[r][c]>0)
                        { document.getElementById(""+funid+"").innerText=array[r][c];}
                        else{
                            document.getElementById(""+funid+"").innerText="";}
                        }
                    }
                }

前面也分析了一点 把数组的下标当做单元格中即标签的ID，然后用document.getElementById("").innerText来修改内容。最后我这里用的是<select>标签用来选择你需要的日期比较简单就不赘述了。写博客的第三次加油勉励

转载自原文链接, 如需删除请联系管理员。

原文链接：用原生js制作日历，转载请注明来源！

赞 0