第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

二、date.js

(function()?{?//?為了防止模塊編寫的時候污染外部環(huán)境，就會用匿名函數(shù)。
??let?datepicker?=?{};
??datepicker.getMonthData?=?function(year,?month)?{
????let?ret?=?[];
????if?(!year?&&?!month?&&?month?!==0)?{
??????let?today?=?new?Date();
??????year?=?today.getFullYear();
??????month?=?today.getMonth()?+?1;
????}
????let?firstDay?=?new?Date(year,?month?-?1,?1);
????let?firstDayWeekDay?=?firstDay.getDay();
????if?(firstDayWeekDay?===?0)?{
??????firstDayWeekDay?=?7;
????}
????year?=?firstDay.getFullYear();?//?哪年
????month?=?firstDay.getMonth()?+?1;?//?哪月
????let?lastDayOfLastMoth?=?new?Date(year,?month?-?1,?0);?//?上個月最后一天
????let?lastDateOfLastMonth?=?lastDayOfLastMoth.getDate();?//?上個月最后一天是幾號
????let?preMonthDayCount?=?firstDayWeekDay?-?1;?//?上個月最后一天是星期幾
????let?lastDay?=?new?Date(year,?month,?0);?//?這個月最后一天
????let?lastDate?=?lastDay.getDate();?//?這個月最后一天是幾號
????for?(let?i?=?0;?i?<?7*6;?i++)?{
??????let?date?=?i?-?preMonthDayCount?+?1;?//?距離上個月最后一天多長時間（單位：天）
??????let?showDate?=?date;
??????let?thisMonth?=?month;
??????if?(date?<=?0)?{
????????//?上一月
????????thisMonth?=?month?-?1;?//?上個月月份
????????showDate?=?lastDateOfLastMonth?+?date;?//?上個月日期
??????}?else?if?(date?>?lastDate)?{
????????//?下一月
????????thisMonth?=?month?+?1;?//?下個月月份
????????showDate?=?showDate?-?lastDate;?//?下個月日期
??????}
??????//?if?(thisMonth?===?0)?{
??????//???thisMonth?=?12;
??????//?}
??????//?if?(thisMonth?===?13)?{
??????//???thisMonth?=?1;
??????//?}
??????thisMonth?=?thisMonth?===?0???12?:thisMonth?===?13???1?:?thisMonth;
??????ret.push({
????????month:?thisMonth,
????????date:?date,
????????showDate:?showDate
??????});
????}
????return?{
??????year:?year,
??????month:?month,
??????days:?ret
????};
??};
??window.datePicker?=?datepicker;
})();

三、main.js

(function()?{
??let?datePicker?=?window.datePicker;
??let?monthData;
??let?$wrapper;
??datePicker.buildUi?=?function(year,?month)?{
????monthData?=?datePicker.getMonthData(year,?month);
????let?html?=?'<div?class="ui-datepicker-head">'+
??????'<a?class="ui-datepicker-btn?ui-datepicker-prev-btn">&lt;</a>'+
??????'?<a?class="ui-datepicker-btn?ui-datepicker-next-btn">&gt;</a>'+
????'?<span?class="ui-datepicker-curr-month">'?+?monthData.year?+?'-?'?+?monthData.month?+?'</span>'+
????'?</div>'+
????'?<div?class="ui-datepicker-body">'+
????'?<table>'+
????'?<thead>'+
????'??<tr>'+
??????'<th>一</th>'+
??????'?<th>二</th>'+
????'?<th>三</th>'+
????'<th>四</th>'+
????'<th>五</th>'+
????'?<th>六</th>'+
????'?<th>七</th>'+
???'???</tr>'+
??????'</thead>'+
?????'?<tbody>';
????for?(let?i?=?0;?i?<?monthData.days.length;?i++)?{
??????let?date?=?monthData.days[i];
??????if?(i?%?7?===?0)?{
????????html?+=?'<tr>';
??????}
??????html?+=?'<td?data-date="'?+?date.date?+?'">'?+?date.showDate?+?'</td>';
??????if?(i?%?7?===?6)?{
????????html?+=?'</tr>';
??????}
????}
????html?+=?'</tbody>'?+
????????'</table>'?+
????????'</div>';
????return?html;
??};
??datePicker.render?=?function(direction)?{
????let?year,month;
????if?(monthData)?{
??????year?=?monthData.year;
??????month?=?monthData.month;
????}
????if?(direction?===?'prev')?{
??????month--;
????}
????if?(direction?===?'next')?{
??????month++;
????}
????let?html?=?datePicker.buildUi(year,?month);
????$wrapper?=?document.querySelector('.ui-datepicker-wrapper');
????if?(!$wrapper)?{
??????$wrapper?=?document.createElement('div');
??????document.body.appendChild($wrapper);
??????$wrapper.className?=?'ui-datepicker-wrapper';
????}
????$wrapper.innerHTML?=?html;
??};
??datePicker.init?=?function($dom)?{
????datePicker.render();
????let?$input?=?document.querySelector($dom);
????let?isOpen?=?false;
????//?$dom點擊后,日歷顯示出來，日歷位置適應。
????$input.addEventListener('click',?function()?{
??????if?(isOpen)?{
????????$wrapper.classList.remove('ui-datepicker-wrapper-show');
????????isOpen?=?false;
??????}?else?{
????????$wrapper.classList.add('ui-datepicker-wrapper-show');
????????let?left?=?$input.offsetLeft;
????????let?top?=?$input.offsetTop;
????????let?height?=?$input.offsetHeight;
????????$wrapper.style.top?=?top?+?height?+?2?+?'px';
????????$wrapper.style.left?=?left?+?'px';
????????isOpen?=?true;
??????}
????},?false);
????//?$wrapper.querySelector('.ui-datepicker-btn').addEventListener();
????//?每次渲染完重新綁定事件
????//?為不變的元素綁定事件
????$wrapper.addEventListener('click',?function(e)?{
??????let?$target?=?e.target;
??????//?let?containsBtn?=?$target.classList.contains('ui-datepicker-btn');
??????if?(!$target.classList.contains('ui-datepicker-btn'))?{
????????return;
??????}
??????if?($target.classList.contains('ui-datepicker-prev-btn'))?{
????????datePicker.render('prev');
??????}?else?if?($target.classList.contains('ui-datepicker-next-btn'))?{
????????datePicker.render('next');
??????}
????},?false);
????$wrapper.addEventListener('click',?function(e)?{
??????let?$target?=?e.target;
??????if?($target.tagName.toLowerCase()?!==?'td')?{
????????return;
??????}
??????let?date?=?new?Date(monthData.year,?monthData.month?-?1,?$target.dataset.date);
??????$input.value?=?format(date);
??????$wrapper.classList.remove('ui-datepicker-wrapper-show');
??????isOpen?=?false;
????})
??}
??function?format(date)?{
????let?ret?=?'';
????let?shuffle?=?function(num)?{
??????if?(num?<=?9)?{
????????return?`0${num}`;
??????}
??????return?num;
????};
????ret?+=?date.getFullYear()?+?'-';
????ret?+=?shuffle(date.getMonth()?+?1)?+?'-';
????ret?+=?shuffle(date.getDate());
????return?ret;
??}
})();

一、優(yōu)化方向：

1、如何在移動端使用這個組件。

2、頁面定位比較復雜時，如何處理彈出框的位置。

3、如何讓上一個月，下一個月，使用不同的樣式。

4、如何讓某些日期可點，某些日期不可點。

一、<a href=""> 寫了href，但是里面沒有賦值，導致點擊a鏈接會重新刷新頁面，一直不能跳轉(zhuǎn)到上一個月。這個bug找了很久。

一、為了防止模塊編寫的時候污染環(huán)境，就會用匿名函數(shù)。

一、日期對象：new Date(year, month-1, date)

1、月份需要-1.

2、越界自動進（退）位

3、getFullYear() / getMonth() / getDate()

4、getYear()：當前年距離1900年多少年。

5、getDay()：當前日期是周幾

二、日期

1、當月第一天：new Date(year, month-1, 1)。

2、當月最后一天：new Date(year, month, 0)。

3、星期一-星期天[1, 2, 3, 4, 5, 6, 0]

一、webstorm：從1到10遞增快捷鍵：li{$}*10

一、日歷制作過程

1、靜態(tài)結(jié)構(gòu)編寫。

2、日歷數(shù)據(jù)。

3、數(shù)據(jù)渲染。

4、事件處理。

當月第一天，最后一天

cursor:pointer;是鼠標指針移上去顯示手形狀

datepicker.init = function (input, year, month) { var html = datepicker.buildUi(year, month), $wrapper = document.createElement("div"); $wrapper.className = "ui-datepicker-wrapper"; $wrapper.innerHTML = html; document.body.appendChild($wrapper); var $input = document.querySelector(input), isOpen = false; $input.addEventListener("click",function () { if(isOpen){ $wrapper.classList.remove("ui-datepicker-wrapper-show"); isOpen = false; }else { $wrapper.classList.add("ui-datepicker-wrapper-show"); var left = $input.offsetLeft, top = $input.offsetTop, height = $input.offsetHeight; $wrapper.style.top = top +height + 2 + "px"; $wrapper.style.left = left + "px"; isOpen = true; } },false);

//循環(huán)獲取當前月的每一天 for(var i=0; i<42; i++){ //算出真實日期是多少(只看day 不考慮month) var date = i - preMonthDayCount +1; var showDate = date; //指定當前月 var thisMonth = month; //處理上一月與下一月 if(date <= 0){ //上一月 thisMonth = month - 1; showDate = lastDateOfLastMonth + date; }else if(date > lastDate){ //下一月 thisMonth = month + 1; showDate = showDate - lastDate; } //修正月顯示 if(thisMonth === 0) thisMonth =12; if(thisMonth === 13) thisMonth = 1; //返回相關(guān)數(shù)據(jù) ret.push({ month:thisMonth, date:date, showDate:showDate }) } return ret; }; window.datepicker = datepicker; })();

(function () { var datepicker = {}; datepicker.getMonthDate = function (year, month) { var ret = []; //如果沒有傳入年月，則獲取當前年月 if(!year || !month){ var today = new Date(); year = today.getFullYear(); month = today.getMonth() + 1; } //獲取本月的第一天 var firstDay = new Date(year, month - 1, 1); //判斷當天是周幾 var firstDayWeekDay = firstDay.getDay(); //修正星期天顯示為0 if(firstDayWeekDay === 0) firstDayWeekDay = 7; //獲取上個月的最后一天 var lastDayOfLastMonth = new Date(year, month - 1, 0); var lastDateOfLastMonth = lastDayOfLastMonth.getDate(); //獲取上個月應該顯示的天數(shù) var preMonthDayCount = firstDayWeekDay - 1; //獲取當月的最后一天 var lastDay = new Date(year, month, 0); var lastDate = lastDay.getDate();

當月的第一天 new Date(year, month-1, 1) 當月的最后一天 new Date(year, month, 0) getFullyear() 獲取年份 getMonth() 獲取月份 getDate() 獲取天 getDay() 獲取星期幾