模擬的日曆奧，嘔心力作
阿新 • • 發佈：2018-12-10
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>日曆的製作</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <script type="text/javascript"> function showDay(a){ //把年月日顯示出來 alert("日："+a); var years=document.getElementById("year").value; var mont=document.getElementById("month").value; alert("年："+years); alert("月："+mont); if(a.length==1&&mont.length==1){ document.getElementById("selects").innerHTML=years+"-0"+mont+"-0"+a; }else if(a.length==1&&mont.length==2){ document.getElementById("selects").innerHTML=years+"-"+mont+"-0"+a; }else if(a.length==2&&mont.length==1){ document.getElementById("selects").innerHTML=years+"-0"+mont+"-"+a; }else if(a.length==2&&mont.length==2){ document.getElementById("selects").innerHTML=years+"-"+mont+"-"+a; } } function windowInit(){ //當頁面載入的時候預設的時間是當前的系統時間 var today = new Date(); //today 顯示Wed Aug 08 2018 14:42:31 GMT+0800(中國時間) var year = today.getFullYear();//2018 var month = today.getMonth()+1;//8 document.getElementById("year").value = year;//把年顯示在年的選擇框裡面 document.getElementById("month").value = month;//把月顯示在月的選擇框裡面 showCalender(month); } function showCalender(mon){ //當年的選擇框和月的選擇框發生改變的時候，就會把框裡面選擇的值複製給年和月 var mm=document.getElementById("month").value; var today = new Date(); if(mon=="一月"){ var month =1; } else if(mon=="二月"){ var month =2; }else if(mon=="二月"){ var month =2; } else if(mon=="三月"){ var month =3; }else if(mon=="四月"){ var month =4; }else if(mon=="五月"){ var month =5; }else if(mon=="六月"){ var month =6; }else if(mon=="七月"){ var month =7; }else if(mon=="八月"){ var month =8; }else if(mon=="九月"){ var month =9; }else if(mon=="十月"){ var month =10; }else if(mon=="十一月"){ var month =11; }else if(mon=="十二月"){ var month =12; }else if(mon==mm){ var month=mon; } var years=document.getElementById("year").value; //顯示應該有的日表格，傳入年和月和table的id //alert("傳過來的year:"+years);//顯示不出來 myCalender(years,month,"cla"); } function myCalender(year,month,tbId){ var oTable = document.getElementById(tbId);//取得table //oTable.tBodies[i]是js的一個方法，獲取屬性是tbody的集合,tbodies[1]代表第二個tbody，順序是按照那個原始碼的順序來的 var oTBody = oTable.tBodies[0]; //獲取行數 var row_length = oTBody.rows.length; for(var rows = 0 ; rows < row_length; rows ++){ oTBody.deleteRow(0);//刪除當前行，因為刪除行數以後，就少一行，下一行就變成第一行 } //以上的步驟就是把之前頁面載入顯示出來的資料清除掉 var dd=new Date(); dd.setYear(year); dd.setMonth(month); //alert("whao:"+month); //alert("years:"+year); var day=new Date(dd.getFullYear(),dd.getMonth(),0).getDate();//31 var firstIndex = new Date(dd.getFullYear(),dd.getMonth()-1,1).getDay();//3 //獲取所選擇月份的上一個月份的天數 var lastday=new Date(dd.getFullYear(),dd.getMonth()-1,0).getDate();//31 //獲取所選擇月份的下一個月份的天數 var firstday=new Date(dd.getFullYear(),dd.getMonth()+1,0).getDate();//31 var days=new Array(42); //補充上個月的 if(firstIndex!=0){//代表星期天，不需要補充的 for(var i=0;i<firstIndex;i++){ days[i]=lastday-(firstIndex-i-1); } } //補充下個月的 var j=1; for(var i=day+firstIndex;i<42;i++){ days[i]=j; j=j+1; } //i代表天數 //放在數組裡面 for(var i=1;i<=day;i++){ days[firstIndex+i-1]=i; } //顯示在頁面上 //1.顯示年份 document.getElementById("month").value=month; document.getElementById("mspa").style.display="block"; //顯示星期 var oTab= document.getElementById("one");//取得table var oTBo = oTab.tBodies[0]; var row= oTBo.rows.length; if(row>1){ oTBo.deleteRow(1);//刪除當前行，因為刪除行數以後，就少一行，下一行就變成第一行 } var ttr=document.createElement("TR"); var ttd=document.createElement("TD"); ttd.innerHTML="日"; ttr.appendChild(ttd); var ttd=document.createElement("TD"); ttd.innerHTML="一"; ttr.appendChild(ttd); var ttd=document.createElement("TD"); ttd.innerHTML="二"; ttr.appendChild(ttd); var ttd=document.createElement("TD"); ttd.innerHTML="三"; ttr.appendChild(ttd); var ttd=document.createElement("TD"); ttd.innerHTML="四"; ttr.appendChild(ttd); var ttd=document.createElement("TD"); ttd.innerHTML="五"; ttr.appendChild(ttd); var ttd=document.createElement("TD"); ttd.innerHTML="六"; ttr.appendChild(ttd); oTBo.appendChild(ttr); //要顯示出來的table想象成6*7 六行七列，但是由於tbodies取得是集合根據順序排的，所以每個都不一樣 for(var i=0;i<6;i++){ //行數 var Newtr=document.createElement("TR"); //列數 for(var j=i*7;j<(i+1)*7;j++){ var Newtd=document.createElement("TD"); if(j>=firstIndex&&j<=day+firstIndex-1){ Newtd.innerHTML = "<span size='4' style='color: #149ac1;cursor:pointer' onclick='showDay(this.innerHTML);' >"+days[j]+"</font>"; }else{ Newtd.innerHTML = "<span size='4' style='color: #777;cursor:pointer' >"+days[j]+"</font>"; } Newtd.setAttribute("width","60px"); Newtd.setAttribute("height","30px"); Newtr.appendChild(Newtd); } oTBody.appendChild(Newtr); } } function showMonth(){ var years=document.getElementById("year").value; //獲取行數 //顯示星期 var oTab= document.getElementById("one");//取得table var oTBo = oTab.tBodies[0]; var row= oTBo.rows.length; if(row>1){ oTBo.deleteRow(1);//刪除當前行，因為刪除行數以後，就少一行，下一行就變成第一行 } var oTable = document.getElementById("cla");//取得table //oTable.tBodies[i]是js的一個方法，獲取屬性是tbody的集合,tbodies[1]代表第二個tbody，順序是按照那個原始碼的順序來的 var oTBody = oTable.tBodies[0]; var row_length = oTBody.rows.length; for(var rows = 0 ; rows < row_length; rows ++){ oTBody.deleteRow(0);//刪除當前行，因為刪除行數以後，就少一行，下一行就變成第一行 } //把1-12月份顯示出來 var sz=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"); //顯示在頁面上 //1.顯示年份 document.getElementById("year").value=years; document.getElementById("month").value=" "; document.getElementById("mspa").style.display="none"; for(var i=0;i<3;i++){ var Newtr=document.createElement("TR"); for(var j=4*i;j<4*i+4;j++){ var Newtd=document.createElement("TD"); Newtd.innerHTML = "<font size='4' style='color: #149ac1;cursor:pointer' onclick='showCalender(this.innerHTML);'>"+sz[j]+"</font>"; Newtd.setAttribute("width","60px"); Newtd.setAttribute("height","30px"); Newtr.appendChild(Newtd); } oTBody.appendChild(Newtr); } } function add_year(){ if(document.getElementById("month").value==" "){ //年 var year=document.getElementById("year").value; year=parseFloat(year); document.getElementById("year").value=year+1; //顯示十二個月 showMonth(); }else{ //月 var month =document.getElementById("month").value; month=parseFloat(month); if(month==12){ month=0; } document.getElementById("month").value=month+1; showCalender( document.getElementById("month").value); } } function up_year(){ if(document.getElementById("month").value==" "){ //年 var year=document.getElementById("year").value; year=parseFloat(year); document.getElementById("year").value=year-1; //顯示十二個月 showMonth(); }else{ var month =document.getElementById("month").value; month=parseFloat(month); if(month==1){ month=13; } document.getElementById("month").value=month-1; showCalender( document.getElementById("month").value); } } </script> <style> .ym{ border: 0px; background-color: white; font-size: 20px; position: relative; float: left; } </style> <body onload="windowInit();"> <table style="position: relative;margin-top: 200px;margin-left: 500px;width:250px;height: 100px;" id="one"> <tbody> <tr> <td colspan="8" > <img src="img/left.png" onclick="up_year();" style="width:27px;height: 19px;position: relative;float: left;margin-top: 6px;"/> <input type="button" onclick="showMonth();" id="year" style="margin-left: 20px;" class="ym" value="2018" /> <input type="button" value="年" style="" class="ym"/> <input type="button" id="month" onchange="showCalender(this.value);" class="ym" style="margin-left: -10px;" value="8"/> <input type="button" id="mspa" value="月" style="" class="ym"/> <img src="img/right.png" onclick="add_year();" style="width:30px;height: 30px;position: relative;float: left;margin-left: 16px;" /> </td> </tr> <tr style="text-align: center" id="xq"> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </tbody> </table> <table id="cla" style="position: relative;margin-top: -8px;margin-left: 500px;width:250px;height: 205px;"> <TBODY align="center"> </TBODY> </table> <!-- 時分秒 --> <h4 id="selects"></h4> </body> </html>