자바스크립트 달력 알림 시스템(모든 브라우저와 호환 가능)_시간 및 날짜
기능 소개:
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 < 7; 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 < 42; i )
MonthArray[i] = " ";
for( var j = 0; j < daysOfMonth; j )
monthArray[j startDayOfWeek] = j 1 ;
monthArray를 반환합니다.
};
/* 선택에서 옵션 인덱스 검색 */
Calendar.prototype._getOptionIndex = function( selectObject, value ){
for( var j = 0; j < selectObject.options.length; 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 <= this.EndYear; i , oYearLen )
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 < 12; i , oMonthLen )
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.length; 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 < selectArray.length; 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 < spans.length; 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" );
}
}
};

핫 AI 도구

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

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

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

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

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

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

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.
