JavaScript實現簡單日曆效果
阿新 • • 發佈:2020-09-12
本文例項為大家分享了JavaScript實現簡單日曆效果的具體程式碼,供大家參考,具體內容如下
實現效果:
根據所選擇的年月,列出當月對應是周幾,效果圖如下:
實現思路:
1、使用select標籤儲存年月的所選選單。使用table標籤儲存當月天數,表頭為固定的週日週一等。
2、使用option物件,給年月迴圈賦值。
3、將每月的天數儲存到陣列中,根據所選的年月獲取當月的天數,以及當月一號對應周幾,對應周幾就在第一行先列印幾個空格,然後從一號開始依次列印當月天數。
4、重新整理年月時,清除上次表格中(除表頭的周)的資料,重新填入資料。
程式碼實現:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--CSS樣式--> <style type="text/css"> *{margin: 0px;padding: 0px;} #div{width: 400px;height: 300px;border: 1px solid red;margin: auto;} #div div:nth-child(1){display: flex;align-items: center;justify-content: center;} #tbcal{border-collapse: collapse;width: 100%;text-align: center;} #tbcal tr td{border: 1px solid red;} </style> <script type="text/javascript"> // 載入完HTML內容後,JavaScript開始執行 window.onload=function(){ initial(); document.getElementById("selyear").onchange=show; document.getElementById("selmonth").onchange=show; show(); } // 顯示日曆 function show(){ // 獲取滑鼠點選所選擇的年月值 var year=parseInt(document.getElementById("selyear").value); var month=parseInt(document.getElementById("selmonth").value); // 判斷是否為閏年,以便確定2月的天數 var flag=year%4==0&&year%100!=0||year%400==0; var dayofmonth=[31,flag?29:28,31,30,31]; // 給date賦值,值為所選擇的某年某月一號 var dt=new Date(); dt.setFullYear(year); dt.setMonth(month-1); dt.setDate(1); // 獲取date對應周幾 var week=dt.getDay(); // 當月應該列印多少行 var rows=Math.ceil((dayofmonth[dt.getMonth()]+week)/7); var k=0; // 如果表格中有除表頭外的資料,進行資料刪除,避免上次月份的資料對下次有影響 var table=document.getElementById("tbcal"); while(table.rows.length>1){ table.deleteRow(1); } // 迴圈向表格中新增資料,生成日曆 for(var i=0;i<rows;i++){ var row=table.insertRow(i+1); for(var j=0;j<7;j++){ var cell=row.insertCell(j); k++; if(k<=week || k>dayofmonth[dt.getMonth()]+week){ cell.innerHTML=""; } else{ cell.innerHTML=k-week; } } } } // 通過option物件向年月中迴圈賦值 function initial(){ var years=document.getElementById("selyear"); var months=document.getElementById("selmonth"); for (var i=1990;i<2019;i++) { var option=document.createElement("option"); option.text=i; years.add(option); } for (var i=1;i<13;i++) { var option=document.createElement("option"); option.text=i; months.add(option); } } </script> </head> <body> <div id="div"> <!--定義年月選單--> <div> <select id="selyear"></select> 年 <select id="selmonth"></select> 月 </div> <div> <!--定義列表--> <table id="tbcal"> <tr> <td>週日</td> <td>週一</td> <td>週二</td> <td>週三</td> <td>週四</td> <td>週五</td> <td>週六</td> </tr> </table> </div> </div> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。