간단한 수평 자바스크립트 날짜 control_time 및 날짜

구체적인 요구 사항은 다음과 같습니다.
1. 날짜 테이블이 페이지를 가로로 채웁니다.
2. 인터넷의 많은 날짜 컨트롤처럼 상자를 표시하는 대신 매월 날짜 목록을 가로로 표시합니다.
3. 연도, 월, 일만 선택사항이어야 합니다. 연도 또는 월을 선택하면 해당 날짜가 자동으로 업데이트됩니다(모든 날짜 제어에서 사용 가능).
4. 기본적으로 현재 연도와 월이 표시되고, 현재 날짜가 강조 표시되며, 현재 주(연도의 주)와 요일이 표시됩니다.
5. 날짜를 선택하면 현재 날짜가 강조 표시되고 주 및 주 표시가 자동으로 업데이트됩니다.
6. 특정 날짜의 표시 스타일을 설정할 수 있는 인터페이스를 제공합니다.
6. 기타 일부 인터페이스 표시 문제입니다.

그냥 날짜 조절인 줄 알았는데 만들기는 비교적 간단한데, 특히 수평적이라는 건 처음 들어보네요!
달력 같은 것을 작성하는 것은 처음이지만, 이번에도 여전히 주 계산과 특정 날짜 설정을 위한 인터페이스 구현에 문제가 있었지만 몇 가지 분석을 거쳐 해결되었습니다. 아주 좋아.
주요 요약:
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.getFullYear(),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
return Math.ceil(daysAll/7);
}
//월의 일수 계산, 연도는 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=[]
varcells1=$(pos).rows [0] .cells;
varcells2=$(pos).rows[1].cells;
var daysArr=['日','一','two','三','4' ,'五','六'];
//다음 월-1은 js 월 표현으로 변환됩니다.
for(var i=1,l=getDaysLen(year,--month) 1;i var wd=new Date(year,month,i).getDay()
cells1[i-1].className=""
if(wd==0| |wd== 6){cells1[i-1].className="weekEnd";} //주말을 위한 특별한 스타일 추가
//_oldCls는 현재 날짜의 기본 스타일을 저장합니다
cells1[i-1 ].innerText=daysArr[ wd];
cells2[i-1].className="unSelectDay";
cells2[i-1].setAttribute("_oldCls","unSelectDay")
cells2 [i-1].innerText=i>9?i:"0" i;
//사용자 정의 스타일 일치
var dtStr=year "|" (월 1)
if((", " styleData.join(',') ",").indexOf("," dtStr ",")>-1){
cells2[i-1].className="unSelectDay " dataStyle[dtStr];
cells2[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;jcells1[j].className=cells2[j].className="";
cells1 [j].innerHTML=cells2[j] .innerHTML=" "; 날짜 내용을 저장하는 DOM 요소를 직접 전달할 수도 있고, 클릭 위치에 따라 함수가 결정될 수도 있습니다.
varchangeInfo=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($("year").value,$("month").value-1,day)
//정보 업데이트
$( "day").value=day; //날짜
$("weekday").value=['day','One','Two','Three','Four','Five',' Six'][dt.getDay()]; //요일
$("week").value= calWeek(dt) //주의 주
}
//초기화
window.attachEvent("onload",function(){
var curDate=new Date(),curYear=curDate.getFullYear();
//상위 및 하위 10년 표시
(var i=-10;i $("year").selectedIndex=10; 기본적으로 현재 연도가 선택됩니다
$("month").selectedIndex=curDate.getMonth(); //현재 월
$("day ").value=curDate.getDate() // 현재 날짜
$("weekday").value=['日','一','two','三','4','五','Saturday'][curDate.getDay()] ; //현재 요일
$("week").value=calWeek(); //현재 주
//날짜 또는 연도 변경 날짜 목록 업데이트
$("연도 ").onchange=$("month").onchange=function(){displayDayList($("year").value,$("month").value,"daysList ")};
//이번 달의 날짜 목록을 표시하고 오늘 날짜를 강조 표시합니다.
displayDayList(curDate.getFullYear(),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)
dataStyle[dataStr]=style
return; //외부 인터페이스
return {setDateStyle:setDateStyle}
})();
//테스트 스타일 설정
logDateControl.setDateStyle([[2007,12,15],[2007,11, 12]], "테스트");

새 문서 <title> </title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <style type="text/css"> *{font-size:14px} /*日期最外层*/ #logCalendar{width:950px;border-top:1px solid #ccc;border-left:1px solid #ccc} /*日期内部所有单元格*/ #logCalendar td{ border-right:1px solid #ccc;border-bottom:1px solid #ccc; padding-left:5px;text-align:center; height:22px;line-height:22px; } #daysList{border-top:1px solid #ccc;border-left:1px solid #ccc} /*日期列表所有单元格*/ #daysList td{text-align:center;height:22px} /*周次及星期几的输入框*/ .bd{border:0;text-align:center;color:#00f} /*日期默认样式*/ .unSelectDay{ color:#00f;font-weight:normal; padding:3px;cursor:pointer; text-decoration:underline } /*当前点击的日期样式*/ .selectDay{color:#fff;font-weight:bold;background:#FEB0B0;padding:1px;text-decoration:none;cursor:normal} /*周末样式*/ .weekEnd{color:#f00} .test{color:#f00;text-decoration:none} </style> <table cellpadding="3" cellspacing="0" id="logCalendar"> <tr> <td>第<input type="text" name="week" class="bd" readonly size="2">周</td> <td>星期<input type="text" name="weekday" class="bd" readonly size="2"> </td> <td rowspan="2" style="padding:0"> <table width="100%" cellpadding="3" height="100%" cellspacing="0" id="daysList"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> </tr>연도 <tr> <td>1<select name="year" id="year"> </select>2<select name="month" id="month"> <option value="1">3</option> <option value="2">4</option> <option value="3">5</option> <option value="4">6</option> <option value="5">7</option> <option value="6">8</option> <option value="7">9</option> <option value="8">10</option> <option value="9">11</option> <option value="10">12</option> <option value="11">월</option> <option value="12">날짜</option></select> </td> <td> <br><input onclick="runEx('runcode57418')" type="button" value="运行代码"> <input onclick="doCopy('runcode57418')" type="button" value="复制代码"> <input onclick="doSave(runcode57418)" type="button" value="保存代码">[Ctrl A 모두 선택 참고: <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 </a>]</td> </tr> </table>