原生js實(shí)現(xiàn)日歷效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
html代碼
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>日歷插件</title> <link rel='stylesheet' href='http://www.cgvv.com.cn/bcjs/css/reset.css' > <link rel='stylesheet' href='http://www.cgvv.com.cn/bcjs/css/index.css' ></head><body> <div class='show'> <button id='pre'>上月</button> <span id='showtime'>2019-01</span> <button id='next'>下月</button> </div> <div id='box'> </div></body><script> // 獲取本月第一天 function getMonthDay(date){ date=new Date(date.valueOf()) date.setDate(1); return date } // 獲取本月最后一天 function getMonthLastDay(date){ date=new Date(date.valueOf()) date.setMonth(date.getMonth()+1); date.setDate(0); return date } //獲取本月的時(shí)間對(duì)象集合 function getMonth(date){ var arr=[] // 獲取本月第一天 var _date=getMonthDay(date) // // 獲取本月最后一天 var dataLast=getMonthLastDay(date).getDate() arr.push(new Date(_date.valueOf())) // 處理本月第一天 到本月最后一天 for(var i =1;i<dataLast;i++){ _date.setDate(_date.getDate()+1) arr.push(new Date(_date.valueOf())) } // 向前補(bǔ)全，重置為本月一號(hào) _date=getMonthDay(date) var forln=_date.getDay() for(var i=0;i<forln;i++){ _date.setDate(_date.getDate()-1) arr.unshift(new Date(_date.valueOf())) } // 向后補(bǔ)全,重置為本月最后一天 _date=getMonthLastDay(date) forln=_date.getDay() for(var i=forln;i<6;i++){ _date.setDate(_date.getDate()+1) arr.push(new Date(_date.valueOf())) } return arr } // 將集合渲染到頁(yè)面 function renderTable(monthDateArr,date){ document.getElementById('showtime').innerHTML=`${date.getFullYear()}-${date.getMonth()+1}` var table=document.createElement(’table’) var trTh=document.createElement(’tr’) trTh.innerHTML=` <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> ` table.appendChild(trTh) var tr=document.createElement(’tr’) for(let i in monthDateArr){ var td=document.createElement(’td’) td.innerHTML=monthDateArr[i].getDate() tr.appendChild(td) if((i*1+1)%7===0){ table.appendChild(tr) tr=document.createElement(’tr’) }else if(i == monthDateArr.length-1){ table.appendChild(tr) } } document.getElementById('box').innerHTML=table.outerHTML } var date=new Date() document.getElementById(’pre’).onclick=function(){ date.setDate(1) date.setMonth(date.getMonth()-1) renderTable(getMonth(date),date) } document.getElementById(’next’).onclick=function(){ date.setDate(1) date.setMonth(date.getMonth()+1) rrenderTable(getMonth(date),date) } renderTable(getMonth(date),date) </script></html>
css代碼
.box{ width: 700px; margin: 0 auto; box-sizing: border-box; padding: 0 1px;}table{ width: 100%;}th,td{ width:100px; text-align: center;}th{ height: 30px; line-height: 30px; background: #e0e5e5;}td{ height: 70px; line-height: 70px; background: #f3f5f5;}.show{ display: flex; align-items: center; justify-content: center;}
更多精彩內(nèi)容請(qǐng)點(diǎn)擊專題《javascript日歷插件使用方法匯總》進(jìn)行學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP.NET Core自定義中間件的方式詳解2. 《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)（一)3. 用xslt+css讓RSS顯示的跟網(wǎng)頁(yè)一樣漂亮4. ASP.NET泛型三之使用協(xié)變和逆變實(shí)現(xiàn)類型轉(zhuǎn)換5. 測(cè)試模式 - XSL教程 - 56. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例7. html5手機(jī)觸屏touch事件介紹8. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效9. JSP的Cookie在登錄中的使用10. .NET擴(kuò)展方法使用實(shí)例詳解
網(wǎng)公網(wǎng)安備