js Calender カレンダーコントロールの作成方法を一緒に学びましょう-jsチュートリアル-php.cn

js Calender カレンダーコントロールの作成方法を一緒に学びましょう

高洛峰

リリース： 2017-01-04 13:46:18

オリジナル

969 人が閲覧しました

最近、js の日付に関する関数をいくつか見ていて、ふとカレンダーコントロールのことを思い出したので、バックグラウンドプログラマーとしてはレベルが限られているので、学習しながら書いたこのサンプルをご覧ください。勉強の進み具合！

まず、一般的に使用される日付関数:

Date(年,月,日)

var date=new Date();

年を取得する

var year=this.date.getFull Year();

月を取得します。ここに月のインデックスがあるので、+1

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

その日の日付を取得します

var day=this.date.getDate() ;

Get その日が属する曜日を返します。0. 日曜日 1. 月曜日 2. 火曜日 3. 水曜日 4. 木曜日 5. 金曜日 6. 土曜日

var week=this.date.getDay();

月の日を取得します数字は曜日です

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);

ログイン後にコピー

さて、実際に使用するパラメータは次のとおりです。曜日に対応する日付と動的スプライシングタグを追加しましょう。書かれた例が投稿されています:

レンダリング:

一起学写js Calender日历控件

<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?options:{
        border:&#39;1px solid green&#39;,
        width:&#39;400px&#39;,
        height:&#39;200px&#39;,
        backgroundColor:&#39;lightgrey&#39;,
        fontColor:&#39;blue&#39;
      }
    },
    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=&#39;<table>&#39;;
       tablestr+=&#39;<tr><td colspan="3"></td><td>年:&#39;+this.year+&#39;</td><td colspan="3">月：&#39;+this.month+&#39;</td></tr>&#39;;
      tablestr+=&#39;<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>&#39;;
      var index=1;
      //判断每月的第一天在哪个位置
      var style=&#39;&#39;;
      if(this.weekstart<7)
      {
        tablestr+=&#39;<tr>&#39;;
         for (var i = 0; i <this.weekstart; i++) {
           tablestr+=&#39;<td></td>&#39;;
         };
         for (var i = 0; i < 7-this.weekstart; i++) {
          style=this.day==(i+1)?"background-Color:green;":"";
           index++;
           tablestr+=&#39;<td style="&#39;+style+&#39;" val=&#39;+(this.year+&#39;-&#39;+this.month+&#39;-&#39;+(i+1))+&#39;>&#39;+(i+1)+&#39;</td>&#39;;
         };
        tablestr+=&#39;</tr>&#39;;
 
      }
      ///剩余天数对应的位置
 
      //判断整数行并且对应相应的位置
      var remaindays=this.monthdays-(7-this.weekstart);
      var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ;
      var  count=Math.floor(remaindays/7);
      for (var i = 0; i < count; i++) {
         tablestr+=&#39;<tr>&#39;;
         for (var k = 0; k < 7; k++) {
           style=this.day==(index+k)?"background-Color:green;":"";
           tablestr+=&#39;<td style="&#39;+style+&#39;" val=&#39;+(this.year+&#39;-&#39;+this.month+&#39;-&#39;+(index+k))+&#39;>&#39;;
           tablestr+=index+k;
           tablestr+=&#39;</td>&#39;;
         };
         tablestr+=&#39;</tr>&#39;;
         index+=7;
      };
 
      //最后剩余的天数对应的位置(不能填充一周的那几天)
      var remaincols=this.monthdays-(index-1);
      tablestr+=&#39;<tr>&#39;;
      for (var i = 0; i < remaincols; i++) {
        style=this.day==index?"background-Color:green;":"";
        tablestr+=&#39;<td style="&#39;+style+&#39;" val=&#39;+(this.year+&#39;-&#39;+this.month+&#39;-&#39;+(index))+&#39;>&#39;;
        tablestr+=index;
        tablestr+=&#39;</td>&#39;;
        index++;
      };
      tablestr+=&#39;</tr>&#39;;
      tablestr+=&#39;</table>&#39;;
      return tablestr;
    },
    Render:function(){
      var calenderDiv=document.createElement(&#39;div&#39;);
      calenderDiv.style.border=this.options.border;
      calenderDiv.style.width=this.options.width;
      calenderDiv.style.height=this.options.height;
      calenderDiv.style.cursor=&#39;pointer&#39;;
      calenderDiv.style.backgroundColor=this.options.backgroundColor;
      // calenderDiv.style.color=this.options.fontColor;
      calenderDiv.style.color=&#39;red&#39; ;
 
      calenderDiv.onclick=function(e){
        var evt=e||window.event;
        var  target=evt.srcElement||evt.target;
 
        if(target&&target.getAttribute(&#39;val&#39;))
        {
 
          alert(target.getAttribute(&#39;val&#39;));
        }
       
      }
      var tablestr=this.View();
      this.tablestr=tablestr;
      calenderDiv.innerHTML=tablestr;
      var div=document.createElement(&#39;div&#39;);
      div.style.width=&#39;auto&#39;;
      div.style.height=&#39;auto&#39;;
       div.appendChild(calenderDiv);
 
       ///翻页div
      var pagerDiv=document.createElement(&#39;div&#39;);
      pagerDiv.style.width=&#39;auto&#39;;
      pagerDiv.style.height=&#39;auto&#39;;
 
        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(&#39;input&#39;);
       preBtn.type=&#39;button&#39;;
       preBtn.value=&#39;<&#39;;
 
       preBtn.onclick=function(){
           that.containerDiv.removeChild(div);
           resetPara(that.year,that.month-2,that.day);
           that.Render();
 
       }
       //下一页
       var nextBtn=document.createElement(&#39;input&#39;);
       nextBtn.type=&#39;button&#39;;
       nextBtn.value=&#39;>&#39;;
      
       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(&#39;div&#39;);
       var  dropdivstr=&#39;&#39;;
       //选择年份
       dropdivstr+=&#39;<select id="ddlYear">&#39;;
       for (var i = 1900; i <= 2100; i++) {
        dropdivstr+= 
        i==that.year
        ?&#39;<option value="&#39;+i+&#39;" selected="true">&#39;+i+&#39;</option>&#39;
        : &#39;<option value="&#39;+i+&#39;">&#39;+i+&#39;</option>&#39;;
       };
       dropdivstr+=&#39;</select>&#39;;
       
      //选择月份
      dropdivstr+=&#39;<select id="ddlMonth">&#39;;
       for (var i = 1; i <= 12; i++) {
        dropdivstr+=
        i==that.month
        ?&#39;<option value="&#39;+i+&#39;" selected="true">&#39;+i+&#39;</option>&#39;
        : &#39;<option value="&#39;+i+&#39;">&#39;+i+&#39;</option>&#39;;
       };
       dropdivstr+=&#39;</select>&#39;;
       dropDiv.innerHTML=dropdivstr;
       div.appendChild(dropDiv);
      that.containerDiv.appendChild(div);
   
 
       ///绑定选择年份和月份的事件
       var ddlChange=function(){
           var ddlYear=document.getElementById(&#39;ddlYear&#39;);
          var ddlMonth=document.getElementById(&#39;ddlMonth&#39;);
          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(&#39;dvTest&#39;,{
        border:&#39;1px solid green&#39;,
        width:&#39;400px&#39;,
        height:&#39;200px&#39;,
        backgroundColor:&#39;&#39;
        }
        );
  calender.Render();
  
}
  </script>
  
  
</head>
<body>
 <div id="dvTest"></div>
</body>
</html>

ログイン後にコピー

コードが再変更され、ビューのテーブルが変更されました。 IE の tableinnerHTML の読み取り専用の問題を解決するために、div に置き換えられました。さらに、構成を容易にするためのオプションが追加されています。
上記のコードは最も基本的なものであり、さらに詳しく説明すると、この記事がヒントになると思います。

js カレンダーカレンダーコントロールの作成方法の学習に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。