JS實(shí)現(xiàn)簡(jiǎn)易日歷效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)易日歷效果的具體代碼,供大家參考,具體內(nèi)容如下
css
* { margin: 0; padding: 0; list-style: none; } #box { width: 280px; height: 360px; margin: 50px auto; background-color: black; color: aliceblue; line-height: 40px; } #header { height: 40px; color: aliceblue; line-height: 40px; } #header span { float: left; text-align: center; margin-top: 10px; line-height: 40px; } #prev, #next { width: 20%; line-height: 40px; cursor: pointer; } #current { width: 60%; line-height: 40px; } #week li { width: 40px; text-align: center; float: left; line-height: 40px; } #content li { width: 40px; text-align: center; float: left; line-height: 40px; }
html
<div id="box"> <div id="header"> <span id="prev">上</span> <span id="current"></span> <span id="next">下</span> </div> <ul id="week"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <ul id="content"> <!-- <li>31</li> <li>1</li> <li>2</li> --> </ul> </div>```
js
var current = document.querySelector('#current');//月份name var prev = document.querySelector('#prev'); // 上個(gè)月 var next = document.querySelector('#next'); // 下個(gè)月 var content = document.querySelector('#content'); // 日期內(nèi)容 // 上個(gè)月要顯示的天數(shù) // 求出本月第一天是星期幾 // 求出上個(gè)月最大的天數(shù) 把日期設(shè)為0 function getPrevDays(date) { var date = new Date(date); // 把日期設(shè)為第一天,為了獲取第一天是星期幾 date.setDate(1); var week = date.getDay(); // 把日期設(shè)為0,為了得到上個(gè)月的最后一天 date.setDate(0); var maxDay = date.getDate(); var list = []; // 遍歷紅色日期的范圍 push進(jìn)數(shù)組 for (var i = maxDay - week + 1; i <= maxDay; i++) { list.push(i); } return list; } // 求本月的天數(shù) // 月份推到下個(gè)月 // 日期設(shè)為0 function getNowDays(date) { var date = new Date(date); date.setMonth(date.getMonth() + 1); date.setDate(0); var maxDay = date.getDate(); // console.log(maxDay) var list = []; // for (var i = 1; i <= maxDay; i++) { list.push(i) } return list; } // 下個(gè)月要顯示的天數(shù) function getNextDays(prevDays, nowDays) { var list = []; // 一頁(yè)日歷42天,42 - 上月天數(shù) - 這個(gè)月天數(shù) = 最后顯示剩余的下個(gè)月天數(shù) for (var i = 1; i <= 42 - prevDays - nowDays; i++) { list.push(i) } return list } var x = 1; // 封裝輸出日期內(nèi)容 // x記錄點(diǎn)擊月份 根據(jù)月份 上面數(shù)組自動(dòng)獲取當(dāng)月要顯示的時(shí)間 function output(x) { arr1 = getPrevDays('2021-' + x); arr2 = getNowDays('2021-' + x); arr3 = getNextDays(arr1.length, arr2.length); // console.log(arr2); var res = ''; for (var i = 0; i < arr1.length; i++) { res += '<li style="color:red;">'; res += arr1[i]; res += '</li>'; } for (var i = 0; i < arr2.length; i++) { res += '<li>'; res += arr2[i]; res += '</li>'; } for (var i = 0; i < arr3.length; i++) { res += '<li style="color:red;">'; res += arr3[i]; res += '</li>'; } // 三個(gè)數(shù)組輸出結(jié)果拼接起來(lái) 輸出 return content.innerHTML = res; } // 輸出月份顯示 var date = new Date(); current.innerHTML = showMonth(new Date()); // 月份 function showMonth(date) { var date = new Date(date); date.setMonth(date.getMonth()); var mon = date.getMonth(); // var year = date.getFullyear(); return (mon + 1) + '月'; } output(x); // 下個(gè)月 next.onclick = function () { x++; // console.log(x); if (x > 12) { x = 1; output(x); } else { current.innerHTML = showMonth('2021-' + x); output(x); } } // 上個(gè)月 prev.onclick = function () { x--; console.log(x); if (x < 1) { x = 12; current.innerHTML = showMonth('2021-' + x); output(x); } else { current.innerHTML = showMonth('2021-' + x); output(x); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序網(wǎng)絡(luò)請(qǐng)求的封裝與填坑之路
本文主要介紹了關(guān)于小程序網(wǎng)絡(luò)請(qǐng)求的封裝的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04javascript命名約定(變量?函數(shù)?類?組件)
這篇小文章主要是通過(guò)一些例子來(lái)介紹一些Javascript中一些關(guān)于命名變量,函數(shù),類或者是組件的通用約定,雖然這些規(guī)則并不是強(qiáng)制性的,但是呢,他們卻被一些JS社區(qū)所廣泛采用,所以,了解他們還是很有必要的2023-03-03JavaScript必備的斷點(diǎn)調(diào)試技巧總結(jié)(推薦)
打斷點(diǎn)操作很簡(jiǎn)單,核心的問(wèn)題在于,斷點(diǎn)怎么打才能夠排查出代碼的問(wèn)題所在呢?下面這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript必備的斷點(diǎn)調(diào)試技巧,需要的朋友可以參考下2021-09-09使用JS解析excel文件的完整實(shí)現(xiàn)步驟
解析excel文件是我們?nèi)粘i_發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于使用JS解析excel文件的完整實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10iphone safari不支持position fixed的解決方法
最近一直在做移動(dòng)web開發(fā),開發(fā)過(guò)程中遇到了許多問(wèn)題,mobile safari不支持position: fixed就是一件很頭疼的事情2012-05-05在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路
對(duì)前端工程師來(lái)說(shuō),跨瀏覽器的兼容性問(wèn)題一直是最頭疼的,測(cè)試一個(gè)小小的東西,就要打開N個(gè)瀏覽器,然后比較來(lái)比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.2010-03-03JavaScript中為什么null==0為false而null大于=0為true(個(gè)人研究)
今天閑來(lái)沒(méi)啥事,研究了一下有關(guān)“null”和“0”的關(guān)系。希望大家看完了能有所收獲,在此與大家分享下,希望也可以受益匪淺2013-09-09