JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果：
根據(jù)所選擇的年月，列出當(dāng)月對(duì)應(yīng)是周幾，效果圖如下：
實(shí)現(xiàn)思路：
1、使用select標(biāo)簽保存年月的所選菜單。使用table標(biāo)簽保存當(dāng)月天數(shù)，表頭為固定的周日周一等。
2、使用option對(duì)象，給年月循環(huán)賦值。
3、將每月的天數(shù)保存到數(shù)組中，根據(jù)所選的年月獲取當(dāng)月的天數(shù)，以及當(dāng)月一號(hào)對(duì)應(yīng)周幾，對(duì)應(yīng)周幾就在第一行先打印幾個(gè)空格，然后從一號(hào)開(kāi)始依次打印當(dāng)月天數(shù)。
4、刷新年月時(shí)，清除上次表格中（除表頭的周）的數(shù)據(jù)，重新填入數(shù)據(jù)。
代碼實(shí)現(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開(kāi)始執(zhí)行 window.onload=function(){ initial(); document.getElementById('selyear').onchange=show; document.getElementById('selmonth').onchange=show; show(); }// 顯示日歷 function show(){// 獲取鼠標(biāo)點(diǎn)擊所選擇的年月值 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賦值,值為所選擇的某年某月一號(hào) var dt=new Date(); dt.setFullYear(year); dt.setMonth(month-1); dt.setDate(1);// 獲取date對(duì)應(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ù)對(duì)下次有影響 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; } } } }// 通過(guò)option對(duì)象向年月中循環(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. IntelliJ IDEA安裝插件的方法步驟2. 通過(guò)Django Admin+HttpRunner1.5.6實(shí)現(xiàn)簡(jiǎn)易接口測(cè)試平臺(tái)3. Docker 部署 Prometheus的安裝詳細(xì)教程4. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法5. idea重置默認(rèn)配置的方法步驟6. idea打開(kāi)多個(gè)窗口的操作方法7. idea設(shè)置代碼格式化的方法步驟8. idea給項(xiàng)目打war包的方法步驟9. IntelliJ IDEA調(diào)整字體大小的方法10. IntelliJ IDEA刪除類的方法步驟
網(wǎng)公網(wǎng)安備