您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JavaScript怎么實現(xiàn)自定義日歷效果”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript怎么實現(xiàn)自定義日歷效果”吧!
實現(xiàn)思路:獲取每個月的第一天是星期幾,然后把前面的天數(shù)填充為空,在獲取每個月有多少天,循環(huán)填充,判斷并給給當(dāng)前時間添加單獨樣式,點擊上一月,和下一月時改變月份。
獲取當(dāng)前月第一天:返回值是 0(周日) 到 6(周六) 之間的一個整數(shù)
var date = new Date(); var y=date.getFullYear(); var m=date.getMonth(); new Date(y,m,1).getDay();
獲取當(dāng)前月有多少天
var date = new Date(); var y=date.getFullYear(); var m=date.getMonth(); new Date(y,m+1,-1).getDate()+1;
最后點擊上一月,下一月月份加一或減一,在執(zhí)行封裝的日歷函數(shù)。
全部代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: #2c3e50; } .calendar { width: 400px; margin: 50px auto; } .calendar-tip { font-size: 16px; text-align: center; color: #fff; } .prev { float: left; cursor: pointer; } .next { float: right; cursor: pointer; } .calendar-month { text-align: center; margin: 10px 0; color: #fff; } ul { list-style: none; display: flex; } li { width: 57px; text-align: center; height: 55px; line-height: 55px; font-size: 16px; color: #fff; } .calendar-day { display: flex; } .calendar-day span { flex: 1; color: #fff; text-align: center; height: 40px; line-height: 40px; } .calendar-data { display: flex; flex-wrap: wrap; } li { width: 57px; cursor: pointer; } li:hover { background: #2d3436; } .calendar-data .on { color: #d63031; } </style> </head> <body> <div class="calendar"> <div class="calendar-tip"> <span class="prev">上一月</span> <em id="year">2022年</em> <span class="next">下一月</span> </div> <div class="calendar-month">五月</div> <div class="calendar-day"> <span>日</span> <span>一</span> <span>二</span> <span>三</span> <span>四</span> <span>五</span> <span>六</span> </div> <ul class="calendar-data"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <script> var date = new Date(); var year = document.querySelector("#year"); var month = document.querySelector(".calendar-month"); var calendarData = document.querySelector(".calendar-data"); var prev = document.querySelector(".prev"); var next = document.querySelector(".next"); var monthArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]; var y,m,day,d,html,today; calendar(); function calendar() { y = date.getFullYear(); year.innerHTML = y + "年"; m = date.getMonth(); month.innerHTML = monthArr[m]; day = new Date(y, m, 1).getDay(); //獲取每個月第一天是周幾 d = new Date(y, m + 1, -1).getDate() + 1; //獲取多少天 html = ""; //把每個月第一天之前的時間填充為空 for (var i = 0; i < day; i++) { html += "<li> </li>"; } for (var j = 1; j <= d; j++) { if (y==new Date().getFullYear() && m==new Date().getMonth() && j== date.getDate()) { html += "<li class='on'>" + j + "</li>"; } else { html += "<li>" + j + "</li>"; } } calendarData.innerHTML = html; } prev.onclick = function () { date.setMonth(date.getMonth() - 1); calendar(); } next.onclick = function () { date.setMonth(date.getMonth() + 1); calendar(); } </script> </body> </html>
效果:
到此,相信大家對“JavaScript怎么實現(xiàn)自定義日歷效果”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。