이 기사 예제는 JS의 간단한 달력을 만드는 방법을 보여줍니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.
오늘 저는 JS를 사용하여 연간 달력을 만드는 방법을 배웠고 이것의 사용법을 검토했습니다. 탭 생산과 약간 다릅니다. 새로운 용도로 InnerHtml을 사용했습니다. 나는 그것을 고수 할 수 있기를 바랍니다. 모든 JS 마스터로부터 더 많은 조언을 드리겠습니다.
InnerHtml 사용
이제 top.innerhtml = "....."를 사용하십시오. 이 ID의 위치에 HTML 코드를 작성하는 메소드.
예를 들어, top.innerhtml = ""; 상단의 해당 위치에 버튼이 나타날 수 있습니다!
프로그램 구현 아이디어 :
1. 탭과 유사합니다. 바닥에 div가 있다는 점을 제외하고;
2. InnerHtml 사용
3. 배열 사용
① 정의 : ARR [0,1,2,3]
② 사용 : ARR [0]
4. 문자열 연결
① 기능 : 두 줄 "+"를 연결합니다.
② 문제 : 연결에서 우선 순위를 해결하기 위해 ()를 사용합니다.
소스 코드 구현 :
자바 스크립트 :
다음과 같이 코드를 복사하십시오. <script type = "text/javaScript">
Window.onload = function ()
{
var arr = [
'거의 새해입니다. 폭죽을 함께 출발합시다! ',
'곧 학교에 갈거야, 불행 해요! ',
'행복한 여자의 날! ',
'꽤 둔한 4 월',
'노동은 영광 스럽다! ',
'행복한 아이들의 날! ',
'얼마나 뜨거운 7 월!',
'8 월 1 일 육군의 날!',
'학교는 다시 시작됩니다! '
];
var odiv = document.getElementById ( 'tab');
var oli = odiv.getElementsByTagName ( 'li');
var otxt = odiv.getElementsByTagName ( 'div') [0];
var i = 0;
for (var i = 0; i <oli.length; i ++)
{
oli [i] .index = i;
oli [i] .onmouseover = function ()
{
for (var i = 0; i <oli.length; i ++)
{
oli [i] .classname = '';
}
this.classname = 'active';
otxt.innerhtml = '<h2>'+(this.index+1)+'월간 활동 </h2> <p>'+arr [this.index]+'</p>';
};
}
};
</스크립트>
CSS :
다음과 같이 코드를 복사하십시오. <style type = "text/css">
* {패딩 : 0; 마진 : 0; }
Li {List 스타일 : 없음; }
바디 {배경 : #f6f9fc; 글꼴 패밀리 : arial; }
.Calendar {너비 : 210px;
마진 : 50px auto 0;
패딩 : 10px 10px 20px 20px;
배경 : #eae9e9; }
.Calendar ul {너비 : 210px;
오버플로 : 숨겨진;
패딩 바닥 : 10px; }
.Calendar li {float : 왼쪽;
너비 : 58px;
높이 : 54px;
여백 : 10px 10px 0 0;
테두리 : 1px 고체 #fff;
배경 : #424242;
색상 : #ffff;
텍스트 정렬 : 센터;
커서 : 포인터; }
.Calendar Li H2 {font-size : 20px; 패딩 탑 : 5px; }
.Calendar li p {font-size : 14px; }
.Calendar .Active {테두리 : 1px Solid #424242;
배경 : #ffff;
색상 : #e84a7e; }
.Calendar .Active H2 {}
.Calendar .Active p {font-weight : Bold; }
.Calendar .text {너비 : 178px;
패딩 : 0 10px 10px;
테두리 : 1px 고체 #fff;
패딩 탑 : 10px;
배경 : #f1f1f1;
색상 : #555; }
.Calendar .Text h2 {font-size : 14px; 마진 바닥 : 10px; }
.Calendar .text p {font-size : 12px; 라인 높이 : 18px; }
</스타일>
HTML :
다음과 같이 코드를 복사하십시오. <body>
<div id = "탭">
<ul>
<li> <h2> 1 </h2> <p> 1 월 </p> </li>
<li> <h2> 2 </h2> <p> 2 월 </p> </li>
<li> <h2> 3 </h2> <p> 3 월 </p> </li>
<li> <h2> 4 </h2> <p> 4 월 </p> </li>
<li> <h2> 5 </h2> <p> May </p> </li>
<li> <h2> 6 </h2> <p> 6 월 </p> </li>
<li> <h2> 7 </h2> <p> 7 월 </p> </li>
<li> <h2> 8 </h2> <p> 8 월 </p> </li>
<li> <h2> 9 </h2> <p> 9 월 </p> </li>
<li> <h2> 10 </h2> <p> 10 월 </p> </li>
<li> <h2> 11 </h2> <p> 11 월 </p> </li>
<li> <h2> 12 </h2> <p> 12 월 </p> </li>
</ul>
<div>
</div>
</div>
</body>
렌더링은 다음과 같습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.