suchen

Heim  >  Artikel  >  Web-Frontend  >  Lernen Sie, gemeinsam ein js-Kalender-Kalendersteuerelement zu schreiben

Lernen Sie, gemeinsam ein js-Kalender-Kalendersteuerelement zu schreiben

高洛峰
高洛峰Original
2017-01-04 13:46:18955Durchsuche

Ich habe mir kürzlich einige Funktionen zum js-Datum angesehen und plötzlich an die Kalendersteuerung gedacht, also habe ich versucht, eine zu schreiben. Als Hintergrundprogrammierer ist mein Niveau begrenzt. Schauen Sie sich bitte dieses Beispiel an, das ich mit einem Lernprogramm geschrieben habe Einstellung, gemeinsam lernen und Fortschritte machen!

Zuerst eine häufig verwendete Datumsfunktion:

Datum(Jahr,Monat,Tag)

var date=new Date();

Erhalten Sie das Jahr

var year=this.date.getFullYear();

Holen Sie sich den Monat, hier ist der Monatsindex, also +1

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

Den Wochentag abrufen

var day=this.date.getDate();

Get der Wochentag, gib 0 zurück. Sonntag 1. Montag 2. Dienstag 3. Mittwoch 4. Donnerstag 5. Freitag 6. Samstag

var Week=this.date.getDay();

Ermitteln Sie den Wochentag, an dem der Erste des Monats ist 

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)

Ermitteln Sie die Anzahl der Tage im Monat 

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

Okay, es gibt so viele Parameter, die wir verwenden, und im Folgenden geht es eigentlich um die Datumskorrespondenz. Einige Operationen und Beurteilungen an den Wochentagen, dynamischen Spleiß-Tags, die Beispiele, die ich geschrieben habe, werden direkt unten gepostet:

Rendering:

一起学写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>

Der Code wurde erneut geändert und die Tabelle der Ansicht durch ein div ersetzt, um das Nur-Lese-Problem von tableinnerHTML des IE zu lösen. Darüber hinaus werden Optionen zur Konfigurierbarkeit hinzugefügt.
Der obige Code hat eine einfache Erklärung. Wenn Sie es ausführlicher machen, kann dieser Artikel Sie inspirieren.

Weitere Artikel zum gemeinsamen Schreiben von js Calender-Kalendersteuerungen finden Sie auf der chinesischen PHP-Website!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Reine Javascript-Version der KalendersteuerungNächster Artikel：Reine Javascript-Version der Kalendersteuerung

In Verbindung stehende Artikel

Mehr sehen