기능 소개:
1. 일반 달력 기능.
2. 대기 등
3. 배열 수신
예:
new Calendar("id").show(
{
"20091120": "오늘 뭐 했어요...",
"2009320": "오늘 뭐했어? . . "
}
)
캘린더 알림 스타일은 3가지 카테고리로 나뉩니다.
a.오늘
b. 이번 달의 프롬프트 스타일
c. 이번 달의 프롬프트 스타일
프롬프트가 있는 날짜 위에 마우스를 올리면 프롬프트 내용이 자동으로 나타납니다.
4. . . . .
크게 2가지 용도로 나누어집니다.
1. div 또는 기타 요소를 제공하고 컨테이너의 id를 Calendar에 전달합니다. 메소드 이름은 다음과 같습니다: show()
예: var cr = Calendar("div1");
cr.show( /*data - 이 배열은 선택 사항입니다. 프롬프트 함수 */ )
2. input[type='text'] 요소를 제공하고 해당 요소의 id 를 Calendar에 전달합니다. 메소드 이름은 다음과 같습니다. pop()
예: var cr = Calendar("input2")
cr.pop()
더 말할 것도 없습니다. 좋다고 생각하시면 지원해주세요. 헤헤.
궁금한 점이나 좋은 아이디어가 있으면 알려주세요. 감사합니다
자세한 사용법과 예시는 압축 패키지에 있습니다.
데모 주소
http://img.jb51.net/online/calendar/demo-1.html
http://img.jb51.net/online /calendar/demo-2.html
패키지 다운로드 주소http://www.jb51.net/codes/12595.html
/*
* 달력
* 언어 0: 중국어, 1: 영어
* 1. 달력을 html 요소에 넣고 'show()' 사용
* 2.Pop -up 캘린더 사용 'pop()'
*/
var Calendar = function( 인스턴스Id, 언어, startYear, endYear ){
if( typeof 인스턴스Id == "string" ){
this.Date = new Date();
this.Year = this.Date.getFullYear();
this.Month = this.Date.getMonth();
this.Week = this.Date.getDay();
this.Today = this.Date.getDate();
this.InstanceId = 인스턴스 ID;
this.Language = 언어 || 1;
this.StartYear = startYear || 이.연도 - 5;
this.EndYear = endYear || 이.1학년;
// 인스턴스가 input[type='text'] 객체인 경우
this.popContainer_id = 'popCalendarContainer';
// 메시지 저장소
this.msgStore = [];
this.caleContainer_id = 'calendarContainer';
this.caleTop = {
today_view_id: 'calendarTodayView',
week_view_id: 'calendarWeekView'
l q_year_id: 'linkQuickYear',
lq_month_id: 'linkQuickMonth',
sq_year_id: ' selectQuickYear',
sq_month_id: 'selectQuickMonth',
close_id: 'calendarClose',
prev_month_id: 'toPrevMonth',
back_today_id: 'backToday',
next_month_id: 'toNextMonth'
}
this.daysContainer_id = 'calendarDaysContainer';
this.msgContainer_id = 'calendarTipsContainer';
this.curDayClass = 'calendarCurrentDay';
this.tipDayClass = 'calendarTipDay';
this.oldTipDayClass = 'calendarOldTipDay';
}
};
/* Calendar language */
Calendar.lang = {
weeks: [
["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
],
weeksMenu:[
["日","一","二","三","四","五","六"],
["SUN","MON","TUR","WED","THU","FRI","SAT"]
]
};
/* Create calendar element */
Calendar.prototype._getViewElement = function(){
// Create page html element
var caleElem = "";
// Create Start
caleElem+= '
//
caleElem+= '
//
//
caleElem+= '
// Week menu
caleElem+= '
for(var i = 0; i caleElem+= ''+Calendar.lang["weeksMenu"][this.Language][i]+'';
}
caleElem+= '
// Days view
caleElem+= '
'; |
caleElem+= '
//
caleElem+= '
//
caleElem+= '';
// 캘린더 메시지>
// 생성 종료
return caleElem;
};
/* 월 데이터 가져오기 */
Calendar.prototype._getMonthViewArray = function( 년, 월 ){
var MonthArray = [];
// 한 주의 시작일부터
var startDayOfWeek = new Date( 년, 월, 1).getDay();
// 이번 달 총 일수
var daysOfMonth = new Date( 년, 월 1, 0).getDate();
// 42: 7*6 행렬
for( var i = 0; i MonthArray[i] = " ";
for( var j = 0; j monthArray[j startDayOfWeek] = j 1 ;
monthArray를 반환합니다.
};
/* 선택에서 옵션 인덱스 검색 */
Calendar.prototype._getOptionIndex = function( selectObject, value ){
for( var j = 0; j if( value == selectObject.options[j].value )
return j;
}
};
/* 연도 데이터를 '연도 선택'에 바인딩 */
Calendar.prototype._bindYearIntoSelect = function(){
var oYear = this.find( this.caleTop.sq_year_id );
var oYearLen = 0;
for( var i = this.StartYear; i oYear.options[oYearLen] = new Option( i , i );
};
/* 월 데이터를 '월 선택'에 바인딩 */
Calendar.prototype._bindMonthIntoSelect = function(){
var oMonth = this.find( this.caleTop.sq_month_id );
var oMonthLen = 0;
for( var i = 0; i oMonth.options[oMonthLen] = new Option( i 1 , i 1 );
};
/* 데이터 바인딩 */
Calendar.prototype._bindAllData = function( curYear, curMonth ){
var cr = this;
// 'select:Year'에 기본 데이터 바인딩
this._bindYearIntoSelect();
// 기본 데이터를 'select:Month'에 바인딩
this._bindMonthIntoSelect();
// 'select:Year' 및 'select:Month' 값 변경
this.changeSelectValue( curYear, curMonth );
// '현재 일별 보기 및 이번 주별 보기'에 기본 데이터 바인딩
this.find( this.caleTop.week_view_id ).innerHTML = Calendar.lang['weeks'][this.Language] [이번.주];
this.find( this.caleTop.today_view_id ).innerHTML = this.Today;
// 날짜를 가져와 'CalendarMain'에 바인딩
// 현재 날짜 클래스 및 마우스 이벤트 추가
var daysOfMonthArray = this._getMonthViewArray( curYear, curMonth );
var spas = this.find( this.daysContainer_id, "span" );
var curYMD = this.Year "" ( this.Month 1 ) "" this.Today;
var selectYear = this.find( this.caleTop.sq_year_id ).value;
var selectMonth = this.find( this.caleTop.sq_month_id ).value;
for( var i = 0; i
var selectYMD = selectYear "" selectMonth "" 범위[i].innerHTML;
if( curYMD == selectYMD )
spans[i].className = this.curDayClass;
else
spans[i].className = "";
}
// 며칠간 팝업 메시지가 오지 않는다면
if( this.msgStore != "" )
this._initPopMsg( this.msgStore );
}
/* 이벤트 바인딩 */
Calendar.prototype._bindAllEvent = function(){
var cr = this;
// 'toPrevMonth, toNextMonth, backToday, 오늘 보기' 이벤트
this.find( this.caleTop.prev_month_id ).onclick = function(){ cr.goPrevOrNextMonth(this); };
this.find( this.caleTop.next_month_id ).onclick = function(){ cr.goPrevOrNextMonth(this); };
this.find( this.caleTop.back_today_id ).onclick = function(){ cr.backToday(); };
this.find( this.caleTop.today_view_id ).onclick = function(){ cr.backToday(); };
// '연도 및 월 선택' onchange 이벤트
this.find( this.caleTop.sq_year_id ).onchange = function(){ cr.updateSelect(); };
this.find( this.caleTop.sq_month_id ).onchange = function(){ cr.updateSelect(); };
// 퀵링크 이벤트
this.find( this.caleTop.lq_year_id ).onclick = function(){
cr.showHide( cr.caleTop.lq_year_id, "none" );
cr.showHide( cr.caleTop.sq_year_id, "block" );
};
this.find( this.caleTop.lq_month_id ).onclick = function(){
cr.showHide( cr.caleTop.lq_month_id, "none" );
cr.showHide( cr.caleTop.sq_month_id, "block" );
};
// 점선 링크 제거
var oLink = this.find( this.caleContainer_id, "a" )
for( var i = 0; i oLink[i].onfocus = function(){ this.blur(); }
}
}
/* 캘린더 보기에 캘린더 바인딩 */
Calendar.prototype._initCalendar = function(){
this._bindAllEvent();
this._bindAllData( this.Year, this.Month );
};
/* 빠른 선택 값 변경 */
Calendar.prototype.changeSelectValue = function( 년, 월 ){
var ymArray = [], selectArray = [], linkArray = [];
// '연도'와 '월'을 배열에 저장합니다.
ymArray[0] = 연도; ymArray[1] = 1개월;
// 'selectYear_id' 및 'selectMonth_id'를 배열에 저장합니다.
selectArray[0] = this.caleTop.sq_year_id; selectArray[1] = this.caleTop.sq_month_id;
linkArray[0] = this.caleTop.lq_year_id; linkArray[1] = this.caleTop.lq_month_id;
for( var i = 0; i var selectObject = this.find( selectArray[i] );
// 반환 인덱스 가져오기
var index = this._getOptionIndex( selectObject, ymArray[i] );
// '연도', '월' 선택 및 값 연결 재설정
selectObject.options[index].selected = "selected";
this.find( linkArray[i] ).innerHTML = selectObject.value;
}
this.resetLinkSelect();
};
/* 다음 또는 이전 달 검색 */
Calendar.prototype.goPrevOrNextMonth = function( obj ){
var curMonthSelect = this.find( this.caleTop.sq_month_id );
var curMonth =parseInt( curMonthSelect.value );
var curYear = this.find( this.caleTop.sq_year_id ).value;
// '다음'이 이번 달을 가져오는 경우 1을 선택합니다.
// '이전'이 이번 달을 가져오는 경우 - 1을 선택합니다.
if( obj.id == this.caleTop.next_month_id )
curMonthSelect. 값 = 현재월 1;
else
curMonthSelect.value = curMonth - 1;
var getNowMonth = curMonthSelect.value - 1;
if( getNowMonth == -1 && curMonth == 1) getNowMonth = 0;
if( getNowMonth == -1 && curMonth == 12 ) getNowMonth = 11;
this._bindAllData( curYear, getNowMonth );
};
/* 'select:Year' 및 'select:Month' 변경 값 업데이트 데이터인 경우 */
Calendar.prototype.updateSelect = function(){
var yearSelectValue = this.find( this.caleTop. sq_year_id ).값;
var MonthSelectValue = this.find( this.caleTop.sq_month_id ).value;
// 패널 데이터 다시 바인딩
this._bindAllData( yearSelectValue, MonthSelectValue - 1 );
};
/* 오늘로 돌아가기: '_bindAllData()' 다시 로드 */
Calendar.prototype.backToday = function(){
this._bindAllData( this.Year, this.Month );
};
/* ID로 인스턴스 객체 또는 인스턴스 객체의 하위 항목 찾기 */
Calendar.prototype.find = function( elemId, childTag ){
if( !childTag )
// 반환: 객체
return document.getElementById( elemId );
else
// 반환: 객체 배열
return this.find( elemId ).getElementsByTagName( childTag );
};
/* CSS 요소 설정 */
Calendar.prototype.css = function( oId, selector ){
var o = this.find( oId );
selector['left']?o.style.left = selector['left']:"";
selector['top']?o.style.top = selector['top']:"";
선택기['위치']? o.style.position = 선택기['position']:"";
}
/* 캘린더 표시 여부 확인 */
Calendar.prototype.showHide = function( objectId, dis ){
return this.find( objectId ).style.display = dis;
};
/* 상단 빠른 메뉴 링크를 초기화하고 */
Calendar.prototype.resetLinkSelect = function(){
this.showHide( this.caleTop.sq_year_id, "none" );을 선택합니다.
this.showHide( this.caleTop.sq_month_id, "none" );
this.showHide( this.caleTop.lq_year_id, "block" );
this.showHide( this.caleTop.lq_month_id, "block" );
};
/* 이 달력을 인스턴스의 HTML에 넣습니다 */
Calendar.prototype.show = function( msgData ){
var obj = this.find( this.InstanceId );
if( obj ){
obj.innerHTML = this._getViewElement();
// 캘린더 이벤트 및 데이터 초기화
this._initCalendar();
// 이 함수에는 'close'가 없습니다.
this.showHide( this.caleTop.close_id, "none" );
if( msgData 유형 == '객체'){
this.msgStore = msgData;
this._initPopMsg( this.msgStore );
}
}
};
/* Init pop message */
Calendar.prototype._initPopMsg = function(){
var cr = this;
var selectYear = this.find( this.caleTop.sq_year_id ).value;
var selectMonth = this.find( this.caleTop.sq_month_id ).value;
var daysOfMonthArray = this._getMonthViewArray( selectYear, selectMonth );
var spans = this.find( this.daysContainer_id, "span" );
for( var key in this.msgStore ){
var keyMD = key.substring( 4 );
var keyY = key.substring( 0, 4 );
for( var i = 0; i var getMD = selectMonth + "" + spans[i].innerHTML;
if( getMD == keyMD ){
if( selectYear == keyY )
spans[i].className = this.tipDayClass +" "+ keyY;
else
spans[i].className = this.oldTipDayClass +" "+ keyY;
spans[i].onmouseover = function(){
var hoverDate = this.className.split(" ")[1] + "" + selectMonth + "" + this.innerHTML;
var y = this.className.split(" ")[1],
m = selectMonth,
d = this.innerHTML;
cr.find( cr.msgContainer_id ).innerHTML = cr._getMsgHtml( y, m, d );
cr.showHide( cr.msgContainer_id, "block" );
}
}
}
}
cr.find( cr.caleContainer_id ).onmouseout = function(){
cr.showHide( cr.msgContainer_id, "none" );
}
};
/* Get message */
Calendar.prototype._getMsgHtml =function( y, m, d ){
var date = y + m + d;
var showDate = y + "-" + m + "-" + d;
var msgHtml = '
msgHtml을 반환합니다.
}
/* 캘린더 팝업 */
Calendar.prototype.pop = function(){
var cr = this;
var obj = this.find( this.InstanceId );
if( obj ){
// 인스턴스 객체 클릭 후 캘린더 팝업
obj.onclick = function( e ){
var e = window.event || 이자형;
var x = e.x || e.pageX,
y = e.y || e.pageY;
if( !cr.find( cr.popContainer_id ) ){
// 팝업 div 만들기
var oDiv = document.createElement("div");
oDiv.id = cr.popContainer_id;
document.body.appendChild( oDiv );
}else{
cr.showHide( cr.popContainer_id, "block" );
}
cr.find( cr.popContainer_id ).innerHTML = cr._getViewElement();
// 캘린더 이벤트 및 데이터 초기화
cr._initCalendar();
// 요일 클릭 이벤트 설정
cr.popDaysClickEvent( obj );
// 위치 설정
cr.css( cr.popContainer_id, {위치: "절대", 왼쪽: x "px", 위쪽: y "px"});
// 패널 이벤트 닫기
cr.find( cr.caleTop.close_id ).onclick = function(){ cr.showHide( cr.popContainer_id, "none" ); };
};
}
};
/* 팝 캘린더 일 이벤트 클릭 [입력용] */
Calendar.prototype.popDaysClickEvent = function( obj ){
var cr = this;
var spans = cr.find( cr.daysContainer_id, "span" );
for( var i = 0; i
if( this.innerHTML != " " ){
var getYear = cr.find( cr.caleTop.sq_year_id ).value;
var getMonth = cr.find( cr.caleTop.sq_month_id ).value;
obj.value = getYear "-" getMonth "-" this.innerHTML;
cr.showHide( cr.popContainer_id, "none" );
}
}
};

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

드림위버 CS6
시각적 웹 개발 도구

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

뜨거운 주제



