[Javascript] - 달력(심플)

Javascript 2011. 6. 28. 18:46
반응형

[Javascript] - 달력(심플)

<html>

<head>

<script language="JavaScript">

function showCalendar(y, m) {

    var text = '<table>\n<tr><td colspan=7 style="text-align:center">';

    text += '<span onclick="showCalendar('+(y-1)+','+m+')"> Y- </span>';

    text += '<span onclick="showCalendar('+(m==1?(y-1)+','+12:y+','+(m-1))+')"> M- </span>';

    text += '[' + y + '/' + ((m < 10) ? ('0' + m) : m) + ']';

    text += '<span onclick="showCalendar('+(m==12?(y+1)+','+1:y+','+(m+1))+')"> M+ </span>';

    text += '<span onclick="showCalendar('+(y+1)+','+m+')"> Y+ </span>';

    text += '</td>';

    var d1 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400

          +m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;

    for (i = 0; i < 42; i++) {

        if (i%7==0) text += '</tr>\n<tr>';

        if (i < d1 || i >= d1+(m*9-m*9%8)/8%2+(m==2?y%4||y%100==0&&y%400?28:29:30))

            text += '<td> </td>';

        else

            text += '<td' + (i%7 ? '' : ' style="color:red;"') + '>' + (i+1-d1) + '</td>';

    }

    document.getElementById('calendarDiv').innerHTML = text + '</tr>\n</table>';

}

</script>

</head>

<body onload="showCalendar(2006,8)">

</body>

</html>

 

<script language="JavaScript">

function showCalendar(y, m) {

    var text = '<table bgcolor="white" border="0">\n<tr><td colspan=7 style="text-align:center">';

    text += '<span onclick="showCalendar('+(y-1)+','+m+')" style="cursor:pointer;"> 작년 </span>';

    text += '<span onclick="showCalendar('+(m==1?(y-1)+','+12:y+','+(m-1))+')" style="cursor:pointer;"> 이전달 </span>';

    text += '[' + y + '/' + ((m < 10) ? ('0' + m) : m) + ']';

    text += '<span onclick="showCalendar('+(m==12?(y+1)+','+1:y+','+(m+1))+')" style="cursor:pointer;"> 다음달 </span>';

    text += '<span onclick="showCalendar('+(y+1)+','+m+')" style="cursor:pointer;"> 내년 </span>';

    text += '</td>';

    text += '<td>';

    text += '<font color="blue">닫기</font>';

    text += '</td>';

    var d1 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400

          +m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;

    for (i = 0; i < 42; i++) {

        if (i%7==0) text += '</tr>\n<tr>';

        if (i < d1 || i >= d1+(m*9-m*9%8)/8%2+(m==2?y%4||y%100==0&&y%400?28:29:30))

            text += '<td> </td>';

        else

            text += '<td' + (i%7 ? '' : ' style="color:red;"') + '>' + (i+1-d1) + '</td>';

    }

    document.getElementById('calendarDiv').innerHTML = text + '</tr>\n</table>';

}

function opencal() {

 document.getElementById("calendarDiv").style.display="block";

}

function closecal() {

 document.getElementById("calendarDiv").style.display="none";

}

</script>

<body onload="showCalendar(<%=TYear%>,<%=TMonth%>)">

달력


반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
[Javascript] - 레이어 Fade In & Fade Out  (0) 2011.06.28
[Javascript] - 클릭시 펼침 메뉴  (0) 2011.06.28
:

[Javascript] - 페이지 로딩 소스

Javascript 2011. 6. 28. 18:17
반응형

<title>페이지 로딩 </title>

<!-- 로딩이 되면 로딩창이 사라져버립니다. -->

<script type="text/javascript">

function loading(){

 if(document.getElementById("loading").innerHTML < 100){

 document.getElementById("loading").innerHTML++;

 setTimeout("loading()","10"); // 오른쪽에 1씩오르는 주기를 써줍니다. 1000 = 1초 , [10권장]

 }else{

 document.getElementById("load").style.display="none";

 document.getElementById("wrapper").style.display="";

 // 쿠키사용으로 다른페이지로 이동할수잇지만 저는 Style 보여주기를 했습니다.

 }

}

</script>

</head>

<body onload="loading()">

<span id="loading">0</span>% / 100%

내용

</body>


반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 레이어 Fade In & Fade Out  (0) 2011.06.28
[Javascript] - 클릭시 펼침 메뉴  (0) 2011.06.28
:

[Javascript] - 레이어 Fade In & Fade Out

Javascript 2011. 6. 28. 18:17
반응형

[Javascript] - 레이어 Fade in & 레이어 Fade out

----------------- 레이어 Fade in -----------------

<script language="JavaScript1.2">

 i = 0;

 function showlayer () {  

   if (i == 0) {

    document.getElementById("Fade in될 레이어ID").style.display='block';

    document.getElementById("Fade in될 레이어ID").style.opacity = 0;

      document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity=0)";

    }

     i = i + 25;

     var op = i / 100;   

     //alert(op);

   document.getElementById("Fade in될 레이어ID").style.opacity = 1 + op;

     document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity="+(0 + i)+")";

     //alert(document.getElementById("Fade in될 레이어ID").style.filter);

    if(i > 99){

     clearInterval(tid);

     i = 0;

    //alert(i);

    }

  }

function show(){

tid = setInterval(showlayer,50);

}

</script>

onclick = "show();"

----------------- 레이어 Fade out -----------------

<script language="JavaScript">

 i = 0;

 function hideLayer () {  

     i = i + 25;

     var op = i / 100;   

     //alert(j);

   parent.document.getElementById("Fade out될 레이어ID").style.opacity = 1 - op;

     parent.document.getElementById("Fade out될 레이어ID").style.filter = "alpha(opacity="+(100 - i)+")";

     //alert(document.getElementById("Fade out될 레이어ID").style.filter);

    if(i > 99){

     clearInterval(tid);

     parent.document.getElementById("Fade out될 레이어ID").style.display='none';

     i = 0;

    }

  }

function hide(){

tid = setInterval(hideLayer,50);

}

</script>

onclick = "hide();"



반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
[Javascript] - 클릭시 펼침 메뉴  (0) 2011.06.28
:
◀ PREV : [1] : [···] : [120] : [121] : [122] : [123] : [124] : [125] : [126] : NEXT ▶

티스토리툴바