js 캘린더 캘린더 제어 together_javascript 기술 작성 방법 배우기-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

js 캘린더 캘린더 제어 together_javascript 기술 작성 방법 배우기

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:05 PM

js달력 제어

최근에 js date 관련 함수를 보다가 갑자기 달력 컨트롤이 생각나서 한번 작성해 봤습니다. 백그라운드 프로그래머로서 제 수준이 부족해서 학습으로 작성한 이 예제를 살펴보시기 바랍니다. 태도, 함께 배우고 발전하세요!

먼저 일반적으로 사용되는 날짜 기능:

날짜(년,월,일)

var date=new Date();

연도 확인

var year=this.date.getFullYear();

월을 가져옵니다. 여기에 월 인덱스가 있으므로 +1

var Month=this.date.getMonth()+1;

오늘의 날짜 가져오기

var day=this.date.getDate();

요일을 구해 0을 반환합니다.일요일 1.월요일 2.화요일 3.수요일 4.목요일 5.금요일 6.토요일

var week=this.date.getDay();

해당 월의 1일이

인 요일을 가져옵니다.

 var   getWeekDay=function(year,month,day){
      var date=new Date(year,month,day);
      return date.getDay();
      }

　　　var  weekstart= getWeekDay(this.year, this.month-1, 1)

이번 달의 일수 구하기

var getMonthDays=function(year,month){
      var date=new Date(year,month,0);
      return date.getDate();
    }
var  monthdays= this.getMonthDays(this.year,this.month);

좋아요, 우리가 사용하는 매개변수가 너무 많습니다. 다음은 실제로 요일에 해당하는 날짜에 대한 몇 가지 연산과 판단, 그리고 제가 작성한 예제를 게시하겠습니다.

렌더링:

<html>  
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
  <style type="text/css">

td{ text-align: center;}
  </style>
  <script type="text/javascript">
   
window.onload=function(){
  var  Calender=function(){
    this.Init.apply(this,arguments);
  }
  Calender.prototype={
    Init:function(container,options){
      this.date=new Date();
      this.year=this.date.getFullYear();
      this.month=this.date.getMonth()+1;
      this.day=this.date.getDate();
      this.week=this.date.getDay();
      this.weekstart=this.getWeekDay(this.year, this.month-1, 1);
      this.monthdays= this.getMonthDays(this.year,this.month);
      this.containerDiv=document.getElementById(container);
      this.options=options!=null&#63;options:{
        border:'1px solid green',
        width:'400px',
        height:'200px',
        backgroundColor:'lightgrey',
        fontColor:'blue'
      }
    },
    getMonthDays:function(year,month){
      var date=new Date(year,month,0);
      return date.getDate();
    },
    getWeekDay:function(year,month,day){
      var date=new Date(year,month,day);
      return date.getDay();
    },
    View:function(){
      var tablestr='<table>';
       tablestr+='<tr><td colspan="3"></td><td>年:'+this.year+'</td><td colspan="3">月：'+this.month+'</td></tr>';
      tablestr+='<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td><td width="14%">五</td><td width="14%">六</td></tr>';
      var index=1;
      //判断每月的第一天在哪个位置
      var style='';
      if(this.weekstart<7)
      {
        tablestr+='<tr>';
         for (var i = 0; i <this.weekstart; i++) {
           tablestr+='<td></td>';
         };
         for (var i = 0; i < 7-this.weekstart; i++) {
          style=this.day==(i+1)&#63;"background-Color:green;":"";
           index++;
           tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';
         };
        tablestr+='</tr>';

      }
      ///剩余天数对应的位置

      //判断整数行并且对应相应的位置
      var remaindays=this.monthdays-(7-this.weekstart);
      var row=Math.floor(remaindays%7==0&#63;remaindays/7:((remaindays/7)+1)) ;
      var  count=Math.floor(remaindays/7);
      for (var i = 0; i < count; i++) {
         tablestr+='<tr>';
         for (var k = 0; k < 7; k++) {
           style=this.day==(index+k)&#63;"background-Color:green;":"";
           tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>';
           tablestr+=index+k;
           tablestr+='</td>';
         };
         tablestr+='</tr>';
         index+=7;
      };

      //最后剩余的天数对应的位置(不能填充一周的那几天)
      var remaincols=this.monthdays-(index-1);
      tablestr+='<tr>';
      for (var i = 0; i < remaincols; i++) {
        style=this.day==index&#63;"background-Color:green;":"";
        tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>';
        tablestr+=index;
        tablestr+='</td>';
        index++;
      };
      tablestr+='</tr>';
      tablestr+='</table>';
      return tablestr;
    },
    Render:function(){
      var calenderDiv=document.createElement('div');
      calenderDiv.style.border=this.options.border;
      calenderDiv.style.width=this.options.width;
      calenderDiv.style.height=this.options.height;
      calenderDiv.style.cursor='pointer';
      calenderDiv.style.backgroundColor=this.options.backgroundColor;
      // calenderDiv.style.color=this.options.fontColor;
      calenderDiv.style.color='red' ;

      calenderDiv.onclick=function(e){
        var evt=e||window.event;
        var  target=evt.srcElement||evt.target;

        if(target&&target.getAttribute('val'))
        {

          alert(target.getAttribute('val'));
        }
      
      }
      var tablestr=this.View();
      this.tablestr=tablestr;
      calenderDiv.innerHTML=tablestr;
      var div=document.createElement('div');
      div.style.width='auto';
      div.style.height='auto';
       div.appendChild(calenderDiv);

       ///翻页div
      var pagerDiv=document.createElement('div');
      pagerDiv.style.width='auto';
      pagerDiv.style.height='auto';

        var that=this;


        ///重新设置参数
      var  resetPara=function(year,month,day){
          that.date=new Date(year,month,day);
          that.year=that.date.getFullYear();
          that.month=that.date.getMonth()+1;
          that.day=that.date.getDate();
          that.week=that.date.getDay();
          that.weekstart=that.getWeekDay(that.year, that.month-1, 1);
          that.monthdays= that.getMonthDays(that.year,that.month);
      }

      //上一页
      var preBtn=document.createElement('input');
       preBtn.type='button';
       preBtn.value='<';

       preBtn.onclick=function(){
           that.containerDiv.removeChild(div);
           resetPara(that.year,that.month-2,that.day);
           that.Render();

       }
       //下一页
       var nextBtn=document.createElement('input');
       nextBtn.type='button';
       nextBtn.value='>';
     
       nextBtn.onclick=function(){
           that.containerDiv.removeChild(div);
           resetPara(that.year,that.month,that.day);
           that.Render();

       }

       pagerDiv.appendChild(preBtn);
       pagerDiv.appendChild(nextBtn);
       div.appendChild(pagerDiv);

       var dropDiv=document.createElement('div');
       var  dropdivstr='';
       //选择年份
       dropdivstr+='<select id="ddlYear">';
       for (var i = 1900; i <= 2100; i++) {
        dropdivstr+= 
        i==that.year
        &#63;'<option value="'+i+'" selected="true">'+i+'</option>'
        : '<option value="'+i+'">'+i+'</option>';
       };
       dropdivstr+='</select>';
      
      //选择月份
      dropdivstr+='<select id="ddlMonth">';
       for (var i = 1; i <= 12; i++) {
        dropdivstr+=
        i==that.month
        &#63;'<option value="'+i+'" selected="true">'+i+'</option>'
        : '<option value="'+i+'">'+i+'</option>';
       };
       dropdivstr+='</select>';
       dropDiv.innerHTML=dropdivstr;
       div.appendChild(dropDiv);
      that.containerDiv.appendChild(div);
  

       ///绑定选择年份和月份的事件
       var ddlChange=function(){
           var ddlYear=document.getElementById('ddlYear');
          var ddlMonth=document.getElementById('ddlMonth');
          var  yearIndex=ddlYear.selectedIndex;
          var year=ddlYear.options[yearIndex].value;
          var  monthIndex=ddlMonth.selectedIndex;
          var month=ddlMonth.options[monthIndex].value;
          that.containerDiv.removeChild(div);
          resetPara(year,month-1,that.day);
          that.Render();
       }

      ddlYear.onchange=function(){
         ddlChange();
      }

       ddlMonth.onchange=function(){
         ddlChange();
        
      }
    }

  }


  var  calender=new Calender('dvTest',{
        border:'1px solid green',
        width:'400px',
        height:'200px',
        backgroundColor:''
        }
        );
  calender.Render();
 
}
  </script>
 
 
</head>
<body>
 <div id="dvTest"></div>
</body>
</html>

IE의 tableinnerHTML의 읽기 전용 문제를 해결하기 위해 뷰의 테이블을 div로 대체하여 코드가 다시 변경되었습니다. 또한 구성 가능성을 위한 옵션이 추가되었습니다.
위의 코드는 가장 기본적인 기능에 대한 설명입니다. 좀 더 자세히 설명하자면 이 글이 여러분에게 영감을 줄 수 있기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.