JavaScript實現(xiàn)簡單日歷效果
本文實例為大家分享了JavaScript實現(xiàn)簡單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)效果：
根據(jù)所選擇的年月，列出當(dāng)月對應(yīng)是周幾，效果圖如下：
實現(xiàn)思路：
1、使用select標(biāo)簽保存年月的所選菜單。使用table標(biāo)簽保存當(dāng)月天數(shù)，表頭為固定的周日周一等。
2、使用option對象，給年月循環(huán)賦值。
3、將每月的天數(shù)保存到數(shù)組中，根據(jù)所選的年月獲取當(dāng)月的天數(shù)，以及當(dāng)月一號對應(yīng)周幾，對應(yīng)周幾就在第一行先打印幾個空格，然后從一號開始依次打印當(dāng)月天數(shù)。
4、刷新年月時，清除上次表格中（除表頭的周）的數(shù)據(jù)，重新填入數(shù)據(jù)。
代碼實現(xiàn)：
<!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內(nèi)容后,JavaScript開始執(zhí)行 window.onload=function(){ initial(); document.getElementById('selyear').onchange=show; document.getElementById('selmonth').onchange=show; show(); }// 顯示日歷 function show(){// 獲取鼠標(biāo)點擊所選擇的年月值 var year=parseInt(document.getElementById('selyear').value); var month=parseInt(document.getElementById('selmonth').value);// 判斷是否為閏年,以便確定2月的天數(shù) var flag=year%4==0&&year%100!=0||year%400==0; var dayofmonth=[31,flag?29:28,31,30,31,30,31,31,30,31,30,31];// 給date賦值,值為所選擇的某年某月一號 var dt=new Date(); dt.setFullYear(year); dt.setMonth(month-1); dt.setDate(1);// 獲取date對應(yīng)周幾 var week=dt.getDay();// 當(dāng)月應(yīng)該打印多少行 var rows=Math.ceil((dayofmonth[dt.getMonth()]+week)/7); var k=0;// 如果表格中有除表頭外的數(shù)據(jù),進(jìn)行數(shù)據(jù)刪除,避免上次月份的數(shù)據(jù)對下次有影響 var table=document.getElementById('tbcal'); while(table.rows.length>1){ table.deleteRow(1); }// 循環(huán)向表格中添加數(shù)據(jù)，生成日歷 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對象向年月中循環(huán)賦值 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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Ajax實現(xiàn)文件上傳功能(Spring MVC)2. 基于javaweb+jsp實現(xiàn)學(xué)生宿舍管理系統(tǒng)3. idea設(shè)置代碼格式化的方法步驟4. 使用EF Code First搭建簡易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫遷移5. PHP框架篇：常用PHP框架大全6. vue動態(tài)加載SVG文件并修改節(jié)點數(shù)據(jù)的操作代碼7. ASP開發(fā)準(zhǔn)則是什么8. Django配置Bootstrap, js實現(xiàn)過程詳解9. Python多分支if語句的使用10. python 日志模塊logging的使用場景及示例
網(wǎng)公網(wǎng)安備