<%@ 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>