> 웹 프론트엔드 > JS 튜토리얼 > 기본 js는 날짜 linkage_javascript 기술을 구현합니다.

기본 js는 날짜 linkage_javascript 기술을 구현합니다.

WBOY
풀어 주다: 2016-05-16 16:20:52
원래의
1050명이 탐색했습니다.

월 결정에는 결정 조건이 너무 많습니다. if else를 사용하면 성능이 크게 저하됩니다. 스위치 구문을 사용하는 것이 좋습니다

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

getDays:함수(연도, 월){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 2월의 일별 데이터 처리
      var FedDays = year%4==0?29:28,
             returnDays = '';
        var 월 = 월<10?월 = '0' 월:month.toString();
전환(월){
사례 '01':
사례 '03':
사례 '05':
사례 '07':
사례 '08':
사례 '10':
사례 '12': returnDays = 31;break;
사례 '04':
사례 '06':
사례 '09':
사례 '11': returnDays = 30;break;
사례 '02': returnDays = FedDays;break;
}
         반품 반품일;
}

전체 소스 코드:

코드 복사 코드는 다음과 같습니다.

/* 작성자:laoguoyong
---------------------
날짜 3단계 연계, 범위 선택
---------------------
매개변수
* [문자열] 대상:'#년,#월,#일' 연, 월, 일의 ID
* [문자열] 범위:'2013-02-03,2019-09-21' 범위, 올바른 형식은 xxxx-xx-xx
----코드를 저장하려면 올바른 날짜 범위 매개변수를 전달하세요.
----오류 데모:
(1) 범위:'2013-02-03,2019-9-21'이 올바르지 않습니다. 날짜 형식에 주의하세요
(2) 범위:'2013-02-03'이 올바르지 않습니다. 전체 범위 값을 입력하세요
(3) 범위:'2013-02-03,2016-02-30'이 ​​틀렸습니다. 2월은 30일이 없습니다
(3) 범위:'2013-02-03,2011-02-30'이 ​​정확하지 않습니다. 범위가 잘못되었습니다
*
*/
함수 GySetDate(opt){
//요소
var target = opt.targets.split(',');
This.eYear = this.getId(targets[0].slice(1));
This.eMonth = this.getId(targets[1].slice(1));
This.eDay = this.getId(targets[2].slice(1));
If(!this.eYear||!this.eMonth||!this.eDay) return;
//범위값
var r = opt.range.indexOf(','),
aStarts = opt.range.slice(0,r).split('-'), // 다음으로 변환: ['2013','05','20']
aEnds = opt.range.slice(r 1,opt.range.length).split('-'); // 다음으로 변환: ['2018','08','20']
//숫자형
This.startYear =parseInt(aStarts[0],10);
This.startMonth =parseInt(aStarts[1],10);
This.startDay =parseInt(aStarts[2],10);
This.endYear =parseInt(aEnds[0],10);
This.endMonth =parseInt(aEnds[1],10);
This.endDay =parseInt(aEnds[2],10);

    this.init();
}
GySetDate.prototype = {
    초기화:함수(){
        var _that = this;
        //初始화일期
        this.setYears({'start':this.startYear,'end':this.endYear});
        this.setMonths({'start':this.startMonth});
        this.setDays({'year':this.startYear,'month':this.startMonth,'start':this.startDay});
        // 年选择
        this.eYear.onchange = 함수(){
            var year = parsInt(this.value);
            스위치(true){
                사례(연도 == _that.startYear):{
                    _that.setMonths({'start':_that.startMonth});
                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
                };휴식;
                사례(연도 == _that.endYear):{
                    _that.setMonths({'start':1,'end':_that.endMonth});
                    if(_that.endMonth>1){
                        _that.setDays({'year':_that.endYear,'month':1,'start':1});   
                    }그밖에{
                        _that.setDays({'year':_that.endYear,'month':1,'start':1,'end':_that.endDay});
                    }
                };휴식;
                기본값:{
                    _that.setMonths({'start':1});
                    _that.setDays({'start':1,'year':year,'month':1});
                }
            }
           
        }
        // 月选择
        this.eMonth.onchange = 함수(){
            var year = parsInt(_that.eYear.options[_that.eYear.selectedIndex].value),
                월 = parsInt(this.value);
            스위치(true){
                사례(연도==_that.endYear&&month==_that.endMonth):{
                    _that.setDays({'start':1,'year':year,'month':month,'end':_that.endDay});
                };휴식;
                사례(연도==_that.startYear&&month==_that.startMonth):{
                    _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay});
                };휴식;
~ ~         기본값:{
                       _that.setDays({'start':1,'year':year,'month':month});
                }
~ ~ }
},
/*연, 월, 일 설정
​​---------------------------------
매개변수 값은 모두 Number
유형입니다. */
// 매개변수 {'start':xx,'end':xxx}
setYears:함수(선택){
This.eYear.innerHTML = '';
for(var n=opt.start;n<=opt.end;n ){
This.eYear.add(new Option(n,n));
}
},
// 매개변수 {'start':xx,'end':xxx}
//'end' 매개변수는 선택사항이며, 무시할 경우 12월부터 시작됩니다.
setMonths:함수(선택){
This.eMonth.innerHTML = '';
var 개월 = opt.end || for(var n=opt.start;n<=months;n ){
If(n<10) n = '0' n;
This.eMonth.add(new Option(n,n));
}
},
// 매개변수 {'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx}
//'end' 매개변수는 선택사항이며, 무시할 경우 이번 달 말일까지 시작됩니다. (월 기준으로 판단)
setDays:함수(선택){
This.eDay.innerHTML = '';
        var days = opt.end || this.getDays(opt.year,opt.month);
for(var n=opt.start;n<=days;n ){
If(n<10) n = '0' n;
This.eDay.add(new Option(n,n));
         }
},
/* 연도와 월을 기준으로 정확한 일수를 반환합니다. 예를 들어 2016-2, 반환은 29일(실행 연도)입니다
------------------------------------- ------------
매개변수 값은 모두 Number
유형입니다. */
GetDays:함수(연도, 월){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 2월의 일별 데이터 처리
      var FedDays = year%4==0?29:28,
             returnDays = '';
        var 월 = 월<10?월 = '0' 월:month.toString();
전환(월){
사례 '01':
사례 '03':
사례 '05':
사례 '07':
사례 '08':
사례 '10':
사례 '12': returnDays = 31;break;
사례 '04':
사례 '06':
사례 '09':
사례 '11': returnDays = 30;break;
사례 '02': returnDays = FedDays;break;
}
         반품 반품일;
},
/*도구 보조 기능
​​---------------------------------
*/
GetId:함수(id){
           return document.getElementById(id);
}
}

효과 표시:

효과는 나쁘지 않습니다. 친구여, 아름답게 꾸미고 자신의 프로젝트에 사용할 수 있습니다.

관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿