Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

자바스크립트 Tip 본문

Web publishing/JavaScript

자바스크립트 Tip

BeOne 2007. 10. 15. 15:00

[js]팝업창 ///////////////////////////////////////////////////////////////////

function goView()
{
 if ((!window.myPopup)||(myPopup.closed)) {
  var winl = (screen.width-445)/2;
  var wint = (screen.height-330)/2;
  var settings  ='scrollbars=yes,height='+350+',';
    settings +='width='+450+',';
    settings +='top='+wint+',';
    settings +='left='+winl;
  myPopup = window.open("./member_fee_condition_view.jsp?id=<%=id%>", "TermGold", settings)
 }
}

[js]특정 부분 인쇄 ///////////////////////////////////////////////////////////

<DIV> 태그를 잘 이용하면 특정 DIV 영역만 인쇄할 수가 있다. 이제부터 그 방법을 알아 보도록 하자.

인터넷 익스플로러는 window.onbeforeprint와 window.onafterprint 이벤트 핸들러를 지원하는데, 이들은 인쇄 전과 후의 웹 페이지 내용을 변경할 수 있도록 도와준다. 이 기능을 이용하여 특정 DIV 영역은 보이게 하고 나머지 영역은 숨길 수가 있다. (불행히 넷스케이프는 이 이벤트 핸들러를 지원하지 않는다. 하지만 여기서는 약간의 제약이 있긴 하지만 넷스케이프에서도 약간의 보이기 속성을 조절하여 비슷하게 구현해 보기로 한다.)

실제 코드를 실펴 보도록 하자.

<HTML>
<HEAD>
<STYLE>
DIV { position: relative; }
</STYLE>
<SCRIPT>
var div2print;
function printDiv (id) {
  if (document.all && window.print) {
    div2print = document.all[id];
 window.onbeforeprint = hideDivs;
 window.onafterprint = showDivs;
    window.print();
  }
  else if (document.layers) {
    div2print = document[id];
    hideDivs();
//    window.print();
  }
}
function hideDivs () {
  if (document.all) {
    var divs = document.all.tags('DIV');
    for (var d = 0; d < divs.length; d++)
      if (divs[d] != div2print)
   {
        divs[d].style.display = 'none';
   }
  }
  else if (document.layers) {
    for (var l = 0; l < document.layers.length; l++)
      if (document.layers[l] != div2print)
        document.layers[l].visibility = 'hide';

  }
}
function showDivs () {
  var divs = document.all.tags('DIV');
  for (var d = 0; d < divs.length; d++)
    divs[d].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
</DIV>
<DIV>
<FORM>
<SELECT NAME="divSelect">
<OPTION value="d1">첫 번째 영역만 인쇄
<OPTION value="d2">두 번째 영역만 인쇄
<OPTION value="d3">세 번째 영역만 인쇄
</SELECT>
<!-- <INPUT TYPE="button"
       ONCLICK="var s = this.form.divSelect;
                var divID = s.options[s.selectedIndex].text;
                printDiv(divID);"
       VALUE="특정 부분 인쇄"
>
-->
<INPUT TYPE="button"
       ONCLICK="var s = this.form.divSelect;
                var divID = s.options[s.selectedIndex].value;
    printDiv(divID);"
       VALUE="특정 부분 인쇄"
>
</FORM>
</DIV>
<DIV ID="d1">
<b>[첫 번째 영역]</b><br>첫 번째 영역입니다!<br><br>
</DIV>
<DIV ID="d2">
<b>[두 번째 영역]</b><br>두 번째 영역입니다!<br>두 번째 영역을 선택하여 인쇄해 보세요!<br><br>
</DIV>
<DIV ID="d3">
<b>[세 번째 영역]</b><br>세 번째 영역입니다!<br>세 번째 영역을 선택하여 인쇄해 보세요!<br>From 코리아인터넷닷컴
</DIV>
</BODY>
</HTML>
[js]해당 페이지 reload /////////////////////////////////////////////////////////

opener.parent.bank_list.document.location.reload();
또 다른 방법
window.location='account_list.jsp';

opener.location.reload();

[js]체크박스 모두 선택 ////////////////////////////////////////////////////////

function selectAll() {
 var frm = document.forms[0];
 for(var i=0; i<frm.elements.length; i++)
  if(frm.elements[i].type == "checkbox")
   frm.elements[i].checked = true;
}

[js]엔터키를 입력 받을 경우 처리 /////////////////////////////////////////////

<input type="text" name="userid" size="15" value="<ICPRINT VAR='userid'>" onKeyPress="subKeyCode(event);">

function subKeyCode(event) {
// alert(event.keyCode);
 if(event.keyCode == 13)
 {
  reterive('<%=cpage%>');
  /*
  document.send.action = "member_receipt_list.jsp";
  document.send.submit();
  */
 }
}

[js]숫자만 입력 받기 ////////////////////////////////////////////////////////

주민등록번호의 입력을 받는 곳이나,
숫자를 입력받아야하는 곳에서
다른 문자의 입력을 방지하는 자스이다.
물론 사용하는 스크립트를 사용해서 체크해도 되겠지만,
서버에 부담을 그만큼 적게 주자는 의미가 되겠다.

OnKeypress="if((event.keyCode<48)||(event.keyCode>57)) event.returnValue=false;"

event.keyCode의 값을 이용하면 여러가지 제어를 할 수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript1.2">
//function korean_check(str)
function korean_check(event)
{
 //var str = frm.test.value;
 //var str = String.fromCharCode(event.keyCode);
 //alert(str);
 var i;
 var ch;

 for (i=0;i<str.length;i++)
 {
  ch = escape(str.charAt(i)); //ISO-Latin-1 문자셋으로 변경
  //가 ==> %uAC00
  //힝 ==> %uD79D
  //？ ==> %uD7A3
 
  if (strCharByte(ch) != 2)
  {
   alert(ch)
   return false;
  }
 }
 
 return true;
}

function strCharByte(chStr)
{
 if (chStr.substring(0, 2) == '%u')
 {
  if (chStr.substring(2,4) == '00')
   return 1;
  else
   return 2; //한글
 }
 else if (chStr.substring(0,1) == '%')
 {
  //alert (parseInt(chStr.substring(1,3), 16));
  if (parseInt(chStr.substring(1,3), 16) > 127)
   return 2; //한글
  else
   return 1;
 }
 else
 {
  return 1;
 }
}

</script>
</HEAD>

<BODY>
<form name="send">
<input type="text" name="test" onKeyPress="korean_check(event);">
</form>
</BODY>
</HTML>

[js]포커스를 다음으로 이동 //////////////////////////////////////////////////////

function _nextFocus(val,maxlength,next) ph{
 var len = IsTrimStr(val).length;
 if(maxlength == len) {
  eval("document.SEND." + next + ".focus();");
 }
}

onKeyUp="javascript: _nextFocus(this.value,6,'PC_SOCIALNUMBER2')"

[js]공백제거 기능 ///////////////////////////////////////////////////////////////

function stripSpace (inString) {
   var outString = "";
   for (i = 0; i < inString.length; i++) {
     if inString.charAt(i) != "" {
       outString += inString.charAt(i);
     }
   }
   return outString
}


function IsTrimStr(checkStr)
{
  var str = "";
  for (i = 0;i < checkStr.length;i++) {
   ch = checkStr.charAt(i);
   if (ch != " "){str = str + ch;}
  }
  return str;
}

[js]동적인 날짜 //////////////////////////////////////////////////////////////////

<SCRIPT LANGUAGE="JavaScript">
<!--
 function makeDay(form) {
  var YEAR=form.year.options[form.year.selectedIndex].value;
  var MONTH=form.month.options[form.month.selectedIndex].value;
  var daysInMonth=new Date(new Date(YEAR,MONTH,1)-86400000).getDate();
  for(var i=0; i<form.day.length; i++) form.day.options[i]=null;
  for(var j=0; j<daysInMonth; j++) {
   if(j<9) var k="0"+(j+1); else var k=j+1;
   form.day.options[j]=new Option(k);
  form.day.options[j].value=k;
  }
 }
 function setDefaultDate(form) {
  var current=new Date();
  var YEAR=current.getFullYear(); var MONTH=current.getMonth()+1;
  var daysInMonth=new Date(new Date(YEAR,MONTH,1)-86400000).getDate();
  for(var i=0; i<daysInMonth; i++) {
   if(i<9) var j="0"+(i+1); else var j=i+1;
   document.write("<option value="+j+">"+j);
  }
  form.year.value=YEAR;
  form.month.options[MONTH-1].selected=true;
  form.day.options[current.getDate()-1].selected=true;
 }
 
 //-->
 </SCRIPT>
 
 <FORM name="form">
 <SELECT name="year" onChange="makeDay(this.form)">
  <option value=2001>2001</option><option value=2002>2002</option>
  <option value=2003>2003</option><option value=2004>2004</option>
 </SELECT>년<SELECT name="month" onChange="makeDay(this.form)">
  <option value=01>01<option value=02>02<option value=03>03<option value=04>04
  <option value=05>05<option value=06>06<option value=07>07<option value=08>08
  <option value=09>09<option value=10>10<option value=11>11<option value=12>12
 </SELECT>월<SELECT name="day"><script>setDefaultDate(document.form)</script>
 </SELECT>일
 </FORM>

[js]프린트 하기 ///////////////////////////////////////////////////////////////////

<table class='Wf' border=0 align='center' width='100%' cellspacing=0 cellpadding=3 nowrap>
 <tr><td>
<DIV><SCRIPT>
<!--
function Filtered()
{
return 0
}
//-->
</SCRIPT>


프린트하기
<div id="page">
<input type=button value="프린트 하기" xonClick="printer();">
</div>


<COMMENT language="javascript">
<!--
function printer()
{
if(navigator.appName =="Netscape")
document.layers['page'].visibility = "hide";
else
document.all['page'].style.visibility = "hidden";
window.print();
if(navigator.appName =="Netscape")
document.layers['page'].visibility = "show";
else
document.all['page'].style.visibility = "visible"; }
</script> <font color=#000000></div>

</td></tr>
</table>

[js]eval 사용하기 ////////////////////////////////////////////////////////////////

eval("document.send." + next + ".focus();");

[js]사업자등록번호 체크 로직 /////////////////////////////////////////////////////

function checkbusino(vencod){

    var sum = 0;
    var getlist =new Array(10);
    var chkvalue =new Array("1","3","7","1","3","7","1","3","5");

//calwin = window.open("","","resize=yes");

    for (var i=0;i<10;i++){
        getlist[i] = vencod.substring(i,i+1);
//        calwin.document.write("getlist["+i+"]="+getlist[i]+"<br>");
    }

    for (var i=0;i<9;i++){
        sum += getlist[i]*chkvalue[i];
//        calwin.document.write("sum +="+"getlist["+i+"]*chkvalue["+i+"]="+getlist[i]+"*"+chkvalue[i]+"="+sum+"<br>");
    }
    sum = sum +parseInt((getlist[8]*5)/10) ;
//        calwin.document.write("sum="+sum+"<br>");
    sidliy = sum%10;
//        calwin.document.write("sidliy="+sidliy+"<br>");
    sidchk = 0;

    if ( sidliy != 0 ) {
        sidchk = 10 - sidliy;
    } else {
        sidchk = 0;
    }
//        calwin.document.write("sidchk="+sidchk+"<br>");
//        calwin.document.write("getlist[9]="+getlist[9]+"<br>");       
    if ( sidchk != getlist[9] ) {
        return false;
    }
    return true;
}

[js]MS 엑셀 형식으로 테이블 보여주기 //////////////////////////////////////////////

<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

function datos_onscroll() {
 if (datos.scrollLeft != text1.value) {
  text1.value = datos.scrollLeft;
  tituloscolumnas.scrollLeft = datos.scrollLeft;
  return;
 }


 if (datos.scrollHeight != text2.value) {
     text2.value = datos.scrollTop;
  titulosfilas.scrollTop = datos.scrollTop;
  return;
 }
}

//-->
</SCRIPT>

<BODY>
<div style="LEFT: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 124px">
<table border="0" cellspacing="1" cellpadding="0" style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; LEFT: 0px; FONT-FAMILY: MS Sans Serif; POSITION: absolute; TOP: 0px" width ="556">
  <tr>
    <td colspan="3" height="62" bgcolor="#3333ff" style="COLOR: #ffffff" valign="center" align="middle">DATOS
      DEL  TRABAJO</td>
  </tr>
  <tr>
    <td width="100" height="62" bgcolor="#6699ff" style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #000000" align ="middle" valign="center">N?lt;/td>
    <td width="200" height="62" bgcolor="#6699ff" style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #000000" align ="middle" valign="center">CLIENTE</td>
    <td width="250" height="62" bgcolor="#6699ff" style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #000000" align ="middle" valign="center">NOMBRE</td>
  </tr>
</table></div>




<div id=tituloscolumnas name="tituloscolumnas" style="LEFT: 556px; OVERFLOW: hidden; WIDTH: 683px; POSITION: absolute; TOP: 0px; HEIGHT: 125px">


<table border="0" cellspacing="1" cellpadding="0" width="1680" style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; LEFT: 0px; FONT-FAMILY: MS Sans Serif; POSITION: absolute; TOP: 0px">
  <tr>
    <td bgcolor="#000080" height="20" bordercolor="#ffffff" valign="center" align="middle" colspan="7"><font color="#ffffff">ABC</font></td>
    <td bgcolor="#000080" height="20" bordercolor="#ffffff" valign="center" align="middle" colspan="7"><font color="#ffffff">XYZ</font></td>
  </tr>
  <tr>
    <td width="120" bgcolor="#3333ff" height="40" rowspan="2" bordercolor="#ffffff" valign="center" align="middle"><font color="#ffffff">INGRESOS</font></td>
    <td width="240" bgcolor="#3333ff" height="20" colspan="2" bordercolor="#ffffff" valign="center" align="middle"><font color="#ffffff">MARGEN
      DE</font></td>
    <td bgcolor="#3333ff" height="40" bordercolor="#ffffff" valign="center" align="middle" colspan="4" rowspan="2"><font color="#ffffff">COSTOS</font></td>
    <td bgcolor="#3333ff" height="40" bordercolor="#ffffff" valign="center" align="middle" rowspan="2"><font color="#ffffff">INGRESOS</font></td>
    <td width="240" bgcolor="#3333ff" height="20" bordercolor="#ffffff" valign="center" align="middle" colspan="2"><font color="#ffffff">MARGEN
      DE</font></td>
    <td bgcolor="#3333ff" height="40" bordercolor="#ffffff" valign="center" align="middle" colspan="4" rowspan="2"><font color="#ffffff">COSTOS</font></td>
  </tr>
  <tr>
    <td width="240" bgcolor="#3333ff" height="20" colspan="2" bordercolor="#ffffff" valign="center" align="middle"><font color="#ffffff">CONTRIBUCION</font></td>
    <td width="240" bgcolor="#3333ff" height="20" bordercolor="#ffffff" valign="center" align="middle" colspan="2"><font color="#ffffff">CONTRIBUCION</font></td>
  </tr>
  <tr>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">FACTURADOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">OTROS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">USO</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">FACTURADOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">OTROS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">USO</td>
  </tr>
  <tr>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">+</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">SERVICIOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">COSTOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">DE</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">+</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> </td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">SERVICIOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">COSTOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">DE</td>
  </tr>
  <tr>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">DEVENGADOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle"> UF</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">%</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">PERSONAL</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">CONTRATADOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">DIRECTOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">EQUIPOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">DEVENGADOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">UF</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">%</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">PERSONAL</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">CONTRATADOS</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">PERSONAL</td>
    <td width="120" bgcolor="#6699ff" height="20" valign="center" align="middle">EQUIPOS</td>
  </tr>
</table>



</div>




<div id=titulosfilas name=titulosfilas style="LEFT: 0px; OVERFLOW: auto; WIDTH: 700px; POSITION: absolute; TOP: 126px; HEIGHT: 184px">

<table border="0" cellspacing="1" cellpadding="0" style="FONT-SIZE: 8pt; LEFT: 0px; FONT-FAMILY: MS Sans Serif; POSITION: absolute; TOP: 0px"    >
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
  <tr>
    <td height="20" width="100"             bgcolor="#666666" align="middle"><font color=white> 2002-999 </font></td>
    <td height="20" width="201"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x </font></td>
    <td height="20" width="250"             bgcolor="#666666" align="left"><font color=white> 123456789x123456789x123456789x </font></td>
  </tr>
</table>
</div>




<div id=datos name="datos" style="LEFT: 556px; OVERFLOW: auto; WIDTH: 700px; POSITION: absolute; TOP: 126px; HEIGHT: 200px" LANGUAGE=javascript onscroll="return datos_onscroll()">
<table width="1680" border="0" cellspacing="1"  style="FONT-SIZE: 8pt; LEFT: 0px; FONT-FAMILY: MS Sans Serif; POSITION: absolute; TOP: 0px"   >
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
  </tr>
  <tr>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" align="middle">123.456.12</td>
    <td height="20" width="120"             bgcolor="#ffffff" al

[js]두 개의 리스트 박스에서 이동 //////////////////////////////////////////////////

<html>
<head>
<title>테스트</title>
</head>

<script language="JavaScript">

function f_setlist(firstlist,secondlist,combo)
{
first = eval("document.frm_criteria." + firstlist);
second = eval("document.frm_criteria." + secondlist);
for (i=0;i < first.options.length;i++)
{
if (first.options[i].selected == true)
{
exit = false;
for (j=0; j< second.options.length;j++)
{
if (first.options[i].text == second.options[j].text)
{
exit = true;
j = second.options.length;
}
}
if (exit == false)
{
ins = first.options[i].text;
val = first.options[i].value;
new_option = new Option(ins,val);
second.options.add(new_option,0);
}
}
}
}

function del_list(secondlist,combo)
{
second = eval("document.frm_criteria." + secondlist);
com = eval("document.frm_criteria." + combo);
for (i=0;i < second.options.length;i++)
{
if (second.options[i].selected == true)
{
second.options[i] = null;
i--;
}
}
}


</script>
<form name=frm_criteria>
<table border=1 cellspacing=0 cellspading=0>
<tr><td>
<TABLE bgcolor="#FFCC00" border=0>
<tr>
<td colspan=4>
<center><u>이동할 항목을 고르세요</u></center>
<br>
</td>
</tr><tr>
<td >
<select name="projectstanr" size="4" style="width=200" multiple >
<option value="one">하나
<option value="two">둘
<option value="three">셋
<option value="four">넷
</select>
</td>
<td>
<input type="button" value="-->" style="width=30" onclick="f_setlist('projectstanr','projectstatus','pro_status')"><br>
<input type="button" value="<--" style="width=30" onclick="del_list('projectstatus','pro_status')">
</td>
<td>
<select name="projectstatus" size="4" style="width=200" multiple>
</td>
</tr>
<tr><td><br></td></tr>
</table>
</td></tr></table>

</body>
</html>
[js]포스트잇 구현 ///////////////////////////////////////////////////////////////////

<HTML>
<HEAD>
<p><center><font color="white"><b>▶ </b></font>
<a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12">
<b>코리아인터넷닷컴 자바스크립트 소스/예제 모음</b></a></center><p>
<br><br>

<table width="100%" height="30%" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td align="center" valign="middle">
<font face="Verdana" size="2" color="#000000f">

<!--- Javascript Start Here ---->

<style>
<!--
#postit{
position:absolute;
width:250;
padding:5px;
background-color:lightyellow;
border:1px solid black;
visibility:hidden;
z-index:100;
cursor:hand;
}
-->
</style>

<div id="postit" style="left:150px;top:150px">
<div align="left"><b><a href="javascript:closeit()">[Close It]</a></b></div>

<p align="left">
<b>*Note</b><br>
<font face="Verdana" size="2" color="#000000">
마우스로 포스트잇을 잡고 오른쪽 왼쪽으로 이동해보세요.<Br>
[Close It] 버튼을 누르면 창이 닫힙니다. </font>
</p>

</div>

<script>
var once_per_browser=0
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit


function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie4(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie4.length > 0) {
    offset = document.cookie4.indexOf(search)
    if (offset != -1) {
      offset += search.length
      end = document.cookie4.indexOf(";", offset);
      if (end == -1)
         end = document.cookie4.length;
      returnvalue=unescape(document.cookie4.substring(offset, end))
      }
   }
  return returnvalue;
}

function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()

</script>

<script language="JavaScript1.2">

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script>

<!--- Javascript End Here ---->

</font>
</td>
</tr></table>

<br><br><br><br><br>
<p align="center"><a href="/channel/content.asp?kid=13&nid=20316#test"><img src="/images/w_list3.gif" border="0"></a></p>
</body>
</html>

[js]한글 포함 길이 구하기 /////////////////////////////////////////////////////////////

HTML>
<HEAD>
<p><center><font color="navy"><b>▶ </b></font>
<a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12"><font color="navy"><b>코리아인터넷닷컴 자바스크립트 소스/예제 모음</b></font></a></center><p>
<script>
function getLength(str)
{
  return(str.length+(escape(str)+"%u").match(/%u/g).length-1);
}
</script>
</HEAD>
<BODY>
<P align=center>이 스크립트는 한글을 2바이트로 계산하여 정확한 문자열의 길이를 구해주는 스크립트입니다. 물론 한글, 영어가 혼합되어 있어도 상관 없습니다.          
</P>
<P align=center>길이를 구하고 싶은 문자열:   <INPUT id=text1 name=text1 style="HEIGHT: 22px; WIDTH: 267px" value="코리아인터넷닷컴 korea.internet.com"> </P>
<P align=center>
<INPUT id=button1 name=button1 type=button value="길이 구하기" onclick='alert("이 문자열의 길이: "+getLength(text1.value)+" 바이트.")'></P>
<p align="center"><a href="/channel/content.asp?kid=13&nid=14501#test"><img src="/images/w_list3.gif" border="0"></a></p>
</BODY>
</HTML>

[js]날짜 입력 /////////////////////////////////////////////////////////////////////

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
<meta http-equiv="Content-Language" content="ko">
<meta http-equiv="Expires" content="0">
<title>작은 달력</title>

<style>
<!--
 #minical  {background : buttonface; margin: 5; margin-top: 2;
 border-top: 1 solid buttonhighlight;
 border-left: 1 solid buttonhighlight;
 border-right: 1 solid buttonshadow;
 border-bottom: 1 solid buttonshadow;
 width:155;display:none;position: absolute; z-index: 99}
-->
</style>
<script type="text/javascript">
var target;

function MiniCal(jucke) {
 target=jucke
 x = (document.layers) ? loc.pageX : event.clientX;
 y = (document.layers) ? loc.pageY : event.clientY;
 minical.style.pixelTop = y-0;
 minical.style.pixelLeft = x-50;
 minical.style.display = (minical.style.display == "block") ? "none" : "block";
 Show_cal(0,0,0)
}
var stime
function doOver() {
 var el = window.event.srcElement;
 cal_Day = el.title;

 if (cal_Day.length > 7) {
  el.style.borderTopColor = el.style.borderLeftColor = "buttonhighlight";
  el.style.borderRightColor = el.style.borderBottomColor = "buttonshadow";
 }
 window.clearTimeout(stime);
}
function doClick() {
 cal_Day = window.event.srcElement.title;
 window.event.srcElement.style.borderColor = "red";
 if (cal_Day.length > 7) {
  target.value=cal_Day
 }
}
function doOut() {
 var el = window.event.fromElement;
 cal_Day = el.title;

 if (cal_Day.length > 7) {
  el.style.borderColor = "white";
 }
 stime=window.setTimeout("minical.style.display='none';", 200);
}

</script>

<Script Language="Vbscript">
Function Show_cal(sYear,sMonth,sDay)
 document.all.minical.innerHTML=""
 datToday=date()

 intThisYear = cint("0"&sYear) '년도넘겨받기
 intThisMonth= cint("0"&sMonth) '월 넘겨받기
 intThisDay = cint("0"&sDay)

 if intThisYear =0 then intThisYear=Year(datToday)  '만약 년도와 월값을 넘겨받지 않았다면 현재 년도를 년도 변수에
 if intThisMonth =0 then intThisMonth=Month(datToday) ' 현재 월을 월 변수에
 if intThisDay =0 then intThisDay=day(datToday)  '오늘 날짜

 if intThisMonth=1 then
  intPrevYear=intThisYear-1
  intPrevMonth=12
  intNextYear=intThisYear
  intNextMonth=2
 elseif intThisMonth=12 then
  intPrevYear=intThisYear
  intPrevMonth=11
  intNextYear=intThisYear + 1
  intNextMonth=1
 else
  intPrevYear=intThisYear
  intPrevMonth=intThisMonth -1
  intNextYear=intThisYear
  intNextMonth=intThisMonth+1
 end if

 NowThisYear=Year(datToDay) ' 현재연도값
 NowThisMonth=Month(datToday) '현재 월값
 NowThisDay=Day(datToday) '오늘 날짜 값

 datFirstDay=DateSerial(intThisYear, intThisMonth, 1) '넘겨받은 날짜의 월초기값 파악
 intFirstWeekday=Weekday(datFirstDay, vbSunday) '넘겨받은 날짜의 주초기값 파악
 intSecondWeekday=intFirstWeekday
 intThirdWeekday=intFirstWeekday

 datThisDay=cdate(intThisYear&"-"&intThisMonth&"-"&intThisDay)
 intThisWeekday=Weekday(datThisDay)

 Select Case intThisWeekday
  Case 1 varThisWeekday="일"
  Case 2 varThisWeekday="월"
  Case 3 varThisWeekday="화"
  Case 4 varThisWeekday="수"
  Case 5 varThisWeekday="목"
  Case 6 varThisWeekday="금"
  Case 7 varThisWeekday="토"
 End Select

 intPrintDay=1 '출력 초기일 값은 1부터
 secondPrintDay=1
 thirdPrintDay=1

 Stop_Flag=0

 if intThisMonth=4 or intThisMonth=6 or intThisMonth=9 or intThisMonth=11 then  '월말 값 계산
  intLastDay=30
 elseif intThisMonth=2 and not (intThisYear mod 4) = 0 then
  intLastDay=28
 elseif intThisMonth=2 and (intThisYear mod 4) = 0 then
  if (intThisYear mod 100) = 0 then
   if (intThisYear mod 400) = 0 then
    intLastDay=29
   else
    intLastDay=28
   end if
  else
   intLastDay=29
  end if
 else
  intLastDay=31
 end if

 if intPrevMonth=4 or intPrevMonth=6 or intPrevMonth=9 or intPrevMonth=11 then  '월말 값 계산
  intPrevLastDay=30
 elseif intPrevMonth=2 and not (intPrevYear mod 4) = 0 then
  intPrevLastDay=28
 elseif intPrevMonth=2 and (intPrevYear mod 4) = 0 then
  if (intPrevYear mod 100) = 0 then
   if (intPrevYear mod 400) = 0 then
    intPrevLastDay=29
   else
    intPrevLastDay=28
   end if
  else
   intPrevLastDay=29
  end if
 else
  intPrevLastDay=31
 end if

 Stop_Flag=0
 Cal_HTML=Cal_HTML& "<table border=0 cellpadding=1 cellspacing=1  onmouseover='doOver()' onmouseout='doOut()' onclick='doClick()' style='font-size : 12;font-family:굴림;'>"
 Cal_HTML=Cal_HTML& "<tr align=center>"
 Cal_HTML=Cal_HTML& "<td align=left  title='이전달' style='cursor:hand;' OnClick='vbscript:call Show_cal("&intPrevYear&","&intPrevMonth&",1)'><font color=navy size=2>&lt;&lt;</font></td>"
 Cal_HTML=Cal_HTML& "<td colspan=5><font color=red><b>"
 Cal_HTML=Cal_HTML& intThisYear&"년 "&intThisMonth&"월"
 Cal_HTML=Cal_HTML& "</font></b></td>"
 Cal_HTML=Cal_HTML& "<td align=right title='다음달' style='cursor:hand;' OnClick='vbscript:call Show_cal("&intNextYear&","&intNextMonth&",1)'><font color=navy size=2>&gt;&gt;</font></a></td>"
 Cal_HTML=Cal_HTML& "</tr>"
 Cal_HTML=Cal_HTML& "<tr align=center bgcolor=navy style='color:white; font-weight:bold'>"
 Cal_HTML=Cal_HTML& "<td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>"
 Cal_HTML=Cal_HTML& "</tr>"

 FOR intLoopWeek=1 to 6   '주단위 루프 시작, 최대 6주

  Cal_HTML=Cal_HTML& "<tr align=right valign=top bgcolor=white >"
  for intLoopDay=1 to 7 '요일단위 루프 시작, 일요일부터

   if intThirdWeekDay > 1 then '첫주시작일이 1보다 크면
    Cal_HTML=Cal_HTML& "<td>&nbsp;</td>"
    intThirdWeekDay=intThirdWeekDay-1
   else
    if thirdPrintDay > intLastDay then '입력날짜가 월말보다 크다면
     Cal_HTML=Cal_HTML& "<td>&nbsp;</td>"
    else '입력날짜가 현재월에 해당되면
     Cal_HTML=Cal_HTML& "<td title='"&intThisYear&"-"&intThisMonth&"-"&thirdPrintDay&"' style='cursor: hand;border: 1px solid white;width:18; height:18;"
     if intThisYear-NowThisYear=0 and intThisMonth-NowThisMonth=0 and thirdPrintDay-intThisDay=0 then '오늘 날짜이면은 글씨폰트를 다르게
      Cal_HTML=Cal_HTML& "background-color:cyan;"
     end if
     if  intLoopDay=1 then '일요일이면 빨간 색으로
      Cal_HTML=Cal_HTML& "color:red;"
     else ' 그외의 경우
      Cal_HTML=Cal_HTML& "color:black;"
     end if
     Cal_HTML=Cal_HTML& "'>"&thirdPrintDay
    end if
    thirdPrintDay=thirdPrintDay+1 '날짜값을 1 증가

    if thirdPrintDay > intLastDay then Stop_Flag=1  '만약 날짜값이 월말값보다 크면 루프문 탈출

   end if
   Cal_HTML=Cal_HTML& "</td>"
  next
  Cal_HTML=Cal_HTML& "</tr>"
  if Stop_Flag=1 then EXIT FOR
 NEXT
 Cal_HTML=Cal_HTML& "</table>"
 Cal_HTML=Cal_HTML& ""
 Cal_HTML=Cal_HTML& ""
 document.all.minical.innerHTML=Cal_HTML
END Function
</SCRIPT>

</head>
<body style="font:menu">
<div id=minical OnClick="this.style.display='none';" oncontextmenu='return false' ondragstart='return false' onselectstart='return false' style="background : buttonface; margin: 5; margin-top: 2;border-top: 1 solid buttonhighlight;border-left: 1 solid buttonhighlight;border-right: 1 solid buttonshadow;border-bottom: 1 solid buttonshadow;width:155;display:none;position: absolute; z-index: 99"></div>
날짜 입력을 아주 쉽고 간편하게 할 수 있습니다.<br>
자바 스크립트와 비베 스크립트를 이용해서 만들었습니다.<br>
가져다 쓰기 쉽게 만들었습니다.<br>
날짜를 입력하세요 : <input type=text value="" size=20 OnClick="MiniCal(this);" readonly style="text-align:center; font:menu">

[js]이미지 미리보기 //////////////////////////////////////////////////////////////////

<script>
   function vuThumb() {
       t=event.srcElement.name.charAt(2);
       upload=[];
       files = "f_" + t + "";
       thumbs = "t_" + t + "";
       upload[t] = f.elements[files].value;
       document.images[thumbs].style.display = "none";
       document.images[thumbs].style.display = "";
      document.images[thumbs].src = f.elements[files].value;
   }
  </script>

<form id="f" action="" method="post" enctype="multipart/form-data">
 <table border="1" width="450">
  <tr>
    <td width="130" height="100" align="center" valign="middle">
      <img id=t_0 width=81 height=60 style="display:none;">
    </td>
    <td width="250" align="center">
     <input type="file" name="f_0" size="30" onChange="vuThumb()" accept="image/jpeg">
    </td>
   </tr>
  </table>
  <table border="1" width="450">
    <tr>
     <td width="130" height="100" align="center" valign="middle">
       <img id=t_1 width=81 height=60 style="display:none;">
     </td>
     <td width="250" align="center">
       <input type="file" name="f_1" size="30" onChange="vuThumb()">
     </td>
    </tr>
   </table>
  </form>
[js]풍선 동움말 ///////////////////////////////////////////////////////////////////

<HTML>
<HEAD>
<p><center><font color="white"><b>▶ </b></font>
<a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12"><b>코리아인터넷닷컴 자바스크립트 소스/예제 모음</b></a></center><p>
<br><br>

<font face="Verdana" size="2" color="#000000">

<!--- Javascript Start Here ---->

<SCRIPT LANGUAGE="JavaScript">

if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}

descarray = new Array(
"Welcome to korea.internet.com",
"이 풍선 도움말은 브라우저의 폭만큼의 길이의 문자열이 지원됩니다.",
"HTML Tag 역시 <b>지원</b> 됩니다.<br> 줄바꿈도 가능합니다.",
"IMAGE 역시 삽입이 가능합니다. <br><img src=http://korea.internet.com/images/title_web.gif>",
"매우 긴문자열도 신의 기호에 맞도록<br> <font color=red>편집</font>이 가능하여 편리하게 쓰실수 있습니다.",
"</center>링크역시 지원이 됩니다.<br><a href='http://korea.internet.com/'>korea.internet.com</a><br><a href='http://korea.internet.com/'>korea.internet.com</a><br><a href='http://korea.internet.com/'>korea.internet.com</a>"
);

overdiv="0";
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>This popup (#"+a+") isn't setup correctly - needs description</font>";}
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
desc =    "<table cellspacing=0 cellpadding="+pad+" border="+bord+"  bgcolor=000000><tr><td>\n"
 +"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n"
 +descarray[a]
 +"\n</td></tr></table>\n"
 +"</td></tr></table>";
if(navigator.family =="nn4") {
 document.object1.document.write(desc);
 document.object1.document.close();
 document.object1.left=x+15;
 document.object1.top=y-5;
 }
else if(navigator.family =="ie4"){
 object1.innerHTML=desc;
 object1.style.pixelLeft=x+15;
 object1.style.pixelTop=y-5;
 }
else if(navigator.family =="gecko"){
 document.getElementById("object1").innerHTML=desc;
 document.getElementById("object1").style.left=x+15;
 document.getElementById("object1").style.top=y-5;
 }
}
function hideLayer(){
if (overdiv == "0") {
 if(navigator.family =="nn4") {eval(document.object1.top="-500");}
 else if(navigator.family =="ie4"){object1.innerHTML="";}
 else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
 }
}
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
//  End -->
</script>


<div id="object1" style="position:absolute; background-color:FFFFDD;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;"  onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
pop up description layer
</div>

<a href="http://korea.internet.com" onMouseOver="popLayer(0)" onMouseOut="hideLayer()">
<font size=-1 face=arial><b>korea.internet.com</b></font></a><br>
<br>
<a href="#" onMouseOver="popLayer(1)" onMouseOut="hideLayer()">
<font size=-1 face=arial><b>프라우저 폭만큼의 문자열 길이지원</b></font></a><br>
<br>
<a href="#" onMouseOver="popLayer(2)" onMouseOut="hideLayer()">
<font size=-1 face=arial><b>HTML 지원</b></font></a><br>
<br>
<a href="#" onMouseOver="popLayer(3)" onMouseOut="hideLayer()">
<font size=-1 face=arial><b>IMAGE 삽입가능</b></font></a><br>
<br>
<a href="#" onMouseOver="popLayer(4)" onMouseOut="hideLayer()">
<font size=-1 face=arial><b>기호에 맞은 편집가능</b></font></a><br>
<br>
<a href="#" onMouseOver="popLayer(5)" onMouseOut="setTimeout('hideLayer()',2000)">
<font size=-1 face=arial><b>LINK 지원</b></font></a><br>

<!--- Javascript End Here ---->

</font>
<br><br>
<p align="center"><a href="/channel/content.asp?kid=13&nid=19528#test"><img src="/images/w_list3.gif" border="0"></a></p>
</body>
</html>

'Web publishing > JavaScript' 카테고리의 다른 글

드랍다운리스트의 값 가져오기  (0) 2007.10.15
[자바스크립트 소스모음] HTML Tip& 자바 스크립트..  (0) 2007.10.15
window.external - 바탕화면에 자신의 웹사이트를 추가  (0) 2007.10.15
Unique Random String(난수)  (0) 2007.10.15
charAt, indexOf, substring,length 설명..  (0) 2007.10.15
'Web publishing/JavaScript' Related Articles more