JS實現(xiàn)一個簡單的日歷
更新時間：2017年02月22日 14:16:52 作者：Reber
本文主要介紹了用js實現(xiàn)一個日歷的示例代碼并解析其實現(xiàn)原理，具有很好的參考價值，下面跟著小編一起來看下吧
主要分為三個部分，1：獲取li元素 2：如何填寫對應(yīng)的日期 3：如何獲取點擊li元素的事件。
1：通過節(jié)點間關(guān)系的屬性children 獲取li元素（兩個for循壞遍歷）；
2：在遍歷填寫日期時，在第一行判斷在當(dāng)月的第一天在星期幾，然后從第一天開始填寫，直到大于當(dāng)月的天數(shù)就暫停填寫，并開始填寫下個月的日期。第一行上個月的日期顯示 : 上月天數(shù)顯示開始值 = 計算上個月的天數(shù) - 這個月開始的第一天在星期幾的值 -1，然后在第一行上月天數(shù)顯示開始值自加。
3：利用JS的事件冒泡獲取li的innerHTML顯示出對應(yīng)日期
效果圖：
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>calendar</title>
<style>
.clear:after{
content:"";
display:table;
clear:both;
}
.left{
float:left;
}
ul{
padding:0px;
margin-top:5px;
margin-bottom:0px;
}
ul>li{
float:left;
list-style:none;
width:30px;
height: 21px;
border: 1px solid #ccc;
text-align:center;
}
.gray{
color:#766565;
}
.top {
height:25px;
}
.top .lf-tri{
border:10px solid transparent;
border-right-color:black;
margin-top:4px;
}
.top .rf-tri{
border:10px solid transparent;
border-left-color:black;
margin-top:4px;
}
.top .content{
width:185px;
height:5px;
text-align:center;
}
</style>
</head>
<body>
<div class="top clear">
<div class="left lf-tri" onclick="lastMonth()"></div>
<div class="left content">2017年2月1日</div>
<div class="left rf-tri" onclick=" nextMonth()"></div>
</div>
<div>
<div id="week">
<ul class="clear">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<ul>
</div>
<div id="date" onclick='getDateNum(event)'>
<ul class="clear">
<li>30</li>
<li>31</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="clear">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<ul class="clear">
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
</ul>
<ul class="clear">
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
</ul>
<ul class="clear">
<li>27</li>
<li>28</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="clear">
<li>27</li>
<li>28</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>
<script>
function $(id){
return document.getElementById(id);
}
function change(cls){
return document.getElementsByClassName(cls);
}
function getDateNum(e) {
console.log(e && e.target.nodeName)//打印發(fā)生事件的元素，再獲取元素nodeName
if(e.target.nodeName=="LI"){//先判斷nodeName是LI
if(e.target.className!="gray"){//點擊本月的日期，顯示在日期欄
change("content")[0].innerHTML = year+'年'+(month+1)+'月'+e.target.innerHTML+'日';
}else{//點擊灰色日期即（上個月或者下個月日期）切換到當(dāng)月
if(e.target.innerHTML>14){
lastMonth();
}else {
nextMonth();
}
}
}
}
//獲取年、月
var today = new Date();
var year=today.getFullYear(), month = today.getMonth();
var totalDay;
var uls=$("date").children,list;
function loadCalendar(){
totalDay=getMonthDays(year,month+1);//計算一個月的天數(shù)
var firstDay = (new Date(year,month,1)).getDay();//計算每個月1號在星期幾
var lastMonthDay=getMonthDays(year,month);
var lastDayCal=lastMonthDay-firstDay+1;//計算上個月在第一行顯示的天數(shù)
//獲取ul元素
var num=1 ,nextNum=1;//日期顯示
// 類數(shù)組對象 轉(zhuǎn) 數(shù)組
//uls = Array.prototype.slice.call(uls)
//獲取li元素 填充
for(var r=0;r<uls.length;r++){
list=uls[r].children;//遍歷ul,獲得li
for(var line=0;line<list.length;line++){
if(r==0){//在第一行 與第一天進行判斷 大于等于第一天時載入日期
if(line>=firstDay){
list[line].innerHTML=num++;
list[line].setAttribute("class","");
}else {
list[line].innerHTML=lastDayCal++;//第一行的上個月天數(shù)顯示
list[line].setAttribute("class","gray");
}
}else {
//判斷是否超出天數(shù) ,不超出則繼續(xù)加，超出則顯示下個月日期
if(num<=totalDay){
list[line].setAttribute("class","");
list[line].innerHTML=num++;
}else {
list[line].innerHTML=nextNum++;//下個月日期顯示
list[line].setAttribute("class","gray");
}
}
}
}
}
loadCalendar();
function getMonthDays(year,month){
//判斷2月份天數(shù)
if(month==2){
days= (year%4==0)&&(year%100!=0)||(year%400==0)? 29:28;
}else {
//1-7月 單數(shù)月為31日
if(month<7){
days= month%2==1?31:30;
}else {
//8-12月 雙月為31日
days = month%2==0?31:30;
}
}
return days;
}
//右擊箭頭下個月
//change("rf-tri")[0].onclick =
function nextMonth() {
month++;
if(month>11){
year+=1;
month=0;
}
change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日";
//console.log(month+1);
loadCalendar();
}
//左擊箭頭上個月
//change("lf-tri")[0].onclick =
function lastMonth() {
month--;
if(month<0){
month=11;
year-=1;
}
change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日";
//console.log(month+1);
loadCalendar();
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
最近因為工作需要,搭建了一個加班打卡的小程序,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序打卡功能的詳細實現(xiàn)流程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
語法高亮效果使用非常頻繁，特別是在博客里展示各種代碼的時候，可以讓代碼更易讀。我們身邊就有很多語法高亮的插件，其中大部分是用javascript寫的，也有一些是通過server端語言實現(xiàn)（比如Phyton或Ruby）。2009-07-07
這篇文章主要介紹了webpack項目輕松混用css module的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
JS控件autocomplete 0.11演示及下載 1月5日已更新
JS控件autocomplete 0.11演示及下載 1月5日已更新...2007-01-01
javascript使用定時函數(shù)實現(xiàn)跳轉(zhuǎn)到某個頁面
定時跳轉(zhuǎn)到某個頁面，比如跳轉(zhuǎn)到一個頁面處理完任務(wù)，然后又回到原來的頁面，這個用javascript的定時函數(shù)很容易實現(xiàn)2013-12-12
這篇文章介紹了javascript間隔刷新的簡單實例，有需要的朋友可以參考一下2013-11-11
html5 canvas js(數(shù)字時鐘)實例代碼
這篇文章主要介紹了html5 canvas js(數(shù)字時鐘)實例代碼，有需要的朋友可以參考一下2013-12-12
本篇文章主要介紹了ionic 3.0+ 項目搭建運行的教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
再談javascript 動態(tài)添加樣式規(guī)則 W3C校檢
Ruby's Louvre blog都是一些精品內(nèi)容，下面這個是介紹javascript 動態(tài)添加樣式規(guī)則，而且最后的函數(shù)，可以讓你的css通過w3c的驗證。2009-12-12
三分鐘學(xué)會用ES7中的Async/Await進行異步編程
這篇文章主要介紹了三分鐘學(xué)會用ES7中的Async/Await進行異步編程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06