JavaScript實(shí)現(xiàn)簡單日歷效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡單日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果：
根據(jù)所選擇的年月，列出當(dāng)月對應(yīng)是周幾，效果圖如下：
實(shí)現(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)周幾就在第一行先打印幾個(gè)空格，然后從一號開始依次打印當(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開始執(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賦值,值為所選擇的某年某月一號 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. java實(shí)現(xiàn)圖形化界面計(jì)算器2. IntelliJ Idea2017如何修改緩存文件的路徑3. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟4. IIS Express 取代 ASP.NET Development Server的配置方法5. python flask框架快速入門6. Spring-Richclient 0.1.0 發(fā)布7. javascript設(shè)計(jì)模式 ? 建造者模式原理與應(yīng)用實(shí)例分析8. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式9. Python使用oslo.vmware管理ESXI虛擬機(jī)的示例參考10. Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫進(jìn)行日期格式化的實(shí)現(xiàn)方法
網(wǎng)公網(wǎng)安備