js Calender control_javascriptスキルの使い方を詳しく解説

私は最近プロジェクトに取り組んでいます。プロジェクトは修正と変更を加えただけで、ようやく安定した状態になりました。バックエンド プログラマーとして、Web からモバイル インターフェイスまであらゆるものを書かなければならないのは本当に大変です。 。 。この 2 日間で、ようやく時間ができたので、カレンダー コントロールを思いついたので、バックグラウンド プログラマーとしては、いくつかの関数を作成してみました。学ぶ姿勢で見てください。この例を書いてみましょう。 。 。

まず、よく使われる日付関数: Date(年,月,日)

コードをコピーします コードは次のとおりです:

var date=new Date();

年を取得します

コードをコピーします コードは次のとおりです:

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

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

コードをコピーします コードは次のとおりです:

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

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

コードをコピーします コードは次のとおりです:

var day=this.date.getDate();

曜日を取得し、0. 日曜日 1. 月曜日 2. 火曜日 3. 水曜日 4. 木曜日 5. 金曜日 6. 土曜日を返します

コードをコピーします コードは次のとおりです:

var Week=this.date.getDay();

月の最初の曜日を取得します

コードをコピーします コードは次のとおりです:

var getWeekDay=function(年,月,日){
var date=new Date(年,月,日);
return date.getDay();
}
var Weekstart= getWeekDay(this.year, this.month-1, 1)

当月の日数を取得します

コードをコピーします コードは次のとおりです:

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

以下は、実際に私が書いたサンプルを直接送信する、曜日に対応する日付とダイナミックスプライシングタグに関するいくつかの操作と判断です。

コードをコピー コードは次のとおりです:

   

<頭>
   
    <スクリプトタイプ="text/javascript">
window.onload=function(){
    var Calender=function(){
        this.Init.apply(this,arguments);
    }
    Calender.prototype={
        Init:function(コンテナ,オプション){
            this.date=new Date();
            this.year=this.date.getFull Year();
            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(コンテナ);
            this.options=options!=null?options:{
                border:'1px 緑一色',
                幅:'400px',
                高さ:'200px',
                背景色: 'ライトグレー',
                fontColor:'青'
            }
        }、
        getMonthDays:function(年,月){
            var date=new Date(年,月,0);
            return date.getDate();
        }、
        getWeekDay:function(年,月,日){
            var date=new Date(年,月,日);
            return date.getDay();
        }、
        ビュー:function(){
            var tablestr='';
              tablestr ='月： ' this.month '';
            tablestr ='';
            var index=1;
            // 判断每月の第一天在哪个位置
            var style='';
            if(this.weekstart             {
                tablestr ='';
                 for (var i = 0; i tablestr ='';
};
for (var i = 0; i style=this.day==(i 1)?"background-Color:green;":"";
インデックス ;
tablestr ='';
};
tablestr ='';
}
///残り日数に対応する位置
//整数行を決定し、対応する位置に対応付けます
Var leftays = 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 tablestr ='';
for (var k = 0; k style=this.day==(index k)?"background-Color:green;":"";
tablestr ='';
};
tablestr ='';
インデックス =7;
};
//最後の残り日数（埋められない曜日）に対応するポジション
var maincols=this.monthdays-(index-1);
tablestr ='';
for (var i = 0; i style=this.day==index?"background-Color:green;":"";
tablestr ='';
インデックス ;
};
tablestr ='';
tablestr ='

年:'this.year'
日	一	二	三	四	五	六
	' (i 1) '
'; tablestr =index k; tablestr ='
'; tablestr =index; tablestr ='

';
            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='ポインター';
           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(年,月,日){
                    that.date=new 日付(年,月,日);
                    that.year=that.date.getFull Year();
                    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='ボタン';
             preBtn.value='               preBtn.onclick=function(){
                     that.containerDiv.removeChild(div);
                     リセットPara(その年,その月-2,その日);
                     that.Render();
             }
             //次の一页
              var nextBtn=document.createElement('input');
             nextBtn.type='ボタン';
             nextBtn.value='>';
             nextBtn.onclick=function(){
                     that.containerDiv.removeChild(div);
                     リセットPara(その年,その月,その日);
                     that.Render();
             }
             pagerDiv.appendChild(preBtn);
             pagerDiv.appendChild(nextBtn);
             div.appendChild(pagerDiv);
             var dropDiv=document.createElement('div');
             var dropdivstr='';
             //选择年份
              dropdivstr ='';
              for (var i = 1900; i                 dropdivstr =
                i==その年
                ?''私は ''
                : '' i '';
              };
             dropdivstr ='';
           //选择月份
            dropdivstr ='';
              for (var i = 1; i                 dropdivstr =
                i==その月
                ?''私は ''
                : '' i '';
              };
             dropdivstr ='';
             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();
}
   


 

        代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。

        上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展