具体的な要件は次のとおりです:
1. 日付テーブルがページを水平方向に埋めます。
2. 各月の日付リストは、インターネット上の多くの日付コントロールのようにボックスを表示するのではなく、横一列に表示されます。
3. 年、月、日のみがオプションである必要があります。年または月を選択すると、対応する日付が自動的に更新されます (これはすべての日付コントロールで使用できます)。
4. デフォルトでは現在の年と月が表示され、現在の日付が強調表示され、現在の週 (年間の週) と曜日が表示されます。
5. 日付を選択すると、現在の日付が強調表示され、週と週の表示が自動的に更新されます。
6. 特定の日付の表示スタイルを設定するインターフェースを提供します。
6. その他、インターフェイスの表示に関する問題があります。
単なる日付コントロールだと思っていました。比較的簡単に作れますが、特に水平方向の必要性は初めて聞きました。
カレンダーのようなものを書くのは初めてですが、今回はまだ週の計算と、最後に用意されている特定の日付を設定するためのインターフェースの実装に問題がありましたが、最終的には解決しました。非常によく。 。
主な概要:
1. クロージャを使用して内部関数と変数を非表示にし、変数の汚染を防ぎます。最後に、外部インターフェイスは 1 つだけ提供されます: setDateStyle
2. 毎年 2 月の日数は、閏年を判断することではなく、2 月 29 日が存在するかどうかを判断して計算されます。存在しない場合は、28 日になります。
3. 週を計算するには、まず現在の日付が何曜日であるかを計算し、今年の 1 月 1 日が何曜日であるかを考慮して計算する必要があります。
4. setDateStyle は、単一の日付スタイルの入力をサポートし、複数の日付スタイルの設定もサポートします。スタイルの更新では、主に文字の結合に配列が使用され、スタイル設定の照合と実行には文字列のindexOfメソッドが使用されます。
5. CSS/JS/HTML はメンテナンスを容易にするために分離されています。機能をモジュール化することで再利用が容易になります。
var logDateControl=(function(){
var curSelEl; //現在選択されている日付
var styleData=[],dataStyle={};
//要素を取得します指定された id
var $=function(id){return document.getElementById(id)}
//指定された日付の週を計算します (デフォルトは現在の日付です)。この計算方法はより厳密で正確です。 🎜> var calWeek= function(dt){
var calDay=dt||new Date(); //計算される現在時刻
var firstDay=new Date(calDay.getFull Year(),0,1 ); //今年の初日
//今が年の何日目かを計算します。00:00 がその日の始まりです
var daysAll=Math.floor((calDay-firstDay)/1000/ 60/60/24) 1;
//年の最初の日は何曜日ですか
var firstDayWeekday=firstDay.getDay()
//結果はその年の月曜日に追加されますその後の計算を容易にするための最初の週
var diffDay=firstDayWeekday= =0?6:firstDayWeekday-1;
daysAll=daysAll diffDay; // 計算結果を返します。
}
//月の日数を計算します。年は 4 桁、月は 1 ～ 2 桁 (1 月は 0 などの JS 日付形式である必要があります)、データは不正です-1 を返します
var getDaysLen=function(year,month){
if(!( /^d{4}$/.test(year)&&/^d{1,2}$/.test (月))){return -1}
var monthDays=[31,28,31,30 ,31,30,31,31,30,31,30,31]
//2 月 29 日が存在します
if(month==1&&new Date(year,1,29).getMonth()== 1){monthDays[1]=29}
return monthDays[month]
}
//表示日付リストには、年と月を渡します (毎日の月を渡します)。例えば、2)では2月が渡され、表示位置は
var displayDayList=function(year,month,pos){
var daysList=[];
var cell1=$(pos).rows [0] .cells;
var cell2=$(pos).rows[1].cells;
var daysArr=['日','一','二','三','四' ,'五','六'];
//次の month-1 は js の月表現に変換されます
for(var i=1,l=getDaysLen(year,--month) 1;i< l;i ) {
var wd=new Date(年,月,i).getDay();
cell1[i-1].className="";
if(wd==0| |wd== 6){cells1[i-1].className="weekEnd";} //週末に特別なスタイルを追加します
//_oldCls は現在の日付のデフォルトのスタイルを保存します
cells1[i-1 ].innerText=daysArr[ wd];
セル2[i-1].className="unSelectDay";
セル2[i-1].setAttribute("_oldCls","unSelectDay"); [i-1]. innerText=i>9?i:"0" i;
// ユーザー定義のスタイルに一致します
var dtStr=year "|" (月 1) "|" i; > if((", " styleData.join(',') ",").indexOf("," dtStr ",")>-1){
cell2[i-1].className="unSelectDay " dataStyle[dtStr];
cell2[i-1].setAttribute("_oldCls","unSelectDay " dataStyle[dtStr]);
}
}
//今月の場合、現在の日を選択します
if( new Date().getMonth()==month){
curSelEl=cells2[new Date().getDate()-1];
curSelEl.className= selectDay";
}
for(var j=i-1;j セル1[j].className=cells2[j].className="";
セル1 [j].innerHTML=cells2[j] .innerHTML=" "; 日付コンテンツを保存する DOM 要素を直接渡すことも、クリック位置に基づいて関数が決定することもできます
var changeInfo=function(e) {
e=e||event;
var el=e.target|| e.srcElement||e; // 最後の e: は受信オブジェクトである可能性があります
var day=el.innerText;
if(!/^d{1,2}$/.test(day) ) return; //日付でない場合は何もしません
//以前に選択した日付のスタイルを復元します
if(curSelEl){curSelEl.className=curSelEl.getAttribute("_oldCls")}
curSelEl=el ; //現在処理されている要素を保存します
//選択された日付のスタイルを更新します
el. className="selectDay";
var dt=new Date($("年").value,$("月").value-1,day);
//情報を更新します
$( "day").value=day; //Date
$("weekday").value=['day ','One','Two','Three','Four','Five',' Six'][dt.getDay()]; //曜日
$("week").value= calWeek(dt) //曜日
}
//初期化
window.attachEvent("onload",function(){
var curDate=new Date(),cur Year=curDate.getFull Year();
//上位 10 年と下位 10 年を表示します
(var i=-10;i $("year").selectedIndex=10;デフォルトでは現在の年が選択されます
$("month").selectedIndex=curDate.getMonth() //現在の月
$("day ").value=curDate.getDate();現在の日付
$("weekday").value=['日','一','二','三','四','五','土曜日'][curDate.getDay()] ; //現在の曜日
$("week").value=calWeek(); //現在の週
//日付または年を変更します 日付リストを更新します
$("year ").onchange=$("月").onchange=function(){displayDayList($("年").value,$("月").value,"daysList ")};
//今月の日付のリストを表示し、今日の日付を強調表示します
displayDayList(curDate.getFull Year(),curDate.getMonth() 1,"daysList"); >
//スタイルを外部から設定するためのインターフェース。
//形式: ([2007,10,12],"color:#f00") ([[2007,10,20],[2007,11,25]],"color:#00f")
//月が 10 未満の場合は 0 を指定しないでください。
var setDateStyle=function(dateArr,style){
if(typeof dateArr!="object")return;配列のインスタンス){
if(dateArr[0] 配列のインスタンス){
for(var i=0;i var dataStr= dateArr.join('|');
styleData.push(dataStr);
}
}
//外部インターフェース
return {setDateStyle:setDateStyle}
})();
// テストスタイル設定
logDateControl.setDateStyle([[2007,12,15],[2007,11, 12]], "テスト");
新しいドキュメント
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
